Будьте в курсе последних событий, подпишитесь на обновления сайта

Создание тем CSS

Создание тем CSS

Здравствуйте! Я уже писал о создании  переменных в CSS. А  сегодня  хочу как  раз привести пример  использование этих самых  переменных. И как мне кажется самым  простым способом использования переменных в CSS может стать  создание тем.

создание тем в css с помощью переменных

Итак давайте рассмотрим на конкретном примере. Пусть дана такая страница.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width" />
        <title>Темы в CSS</title>
        <style>
        :root{
          --panel-bg: #dfe4ea;
          --container-bg: #f1f2f6;
          --text: #2f3542;
        }
        :root[theme='dark'] {
          --panel-bg: #2f3542;
          --container-bg: #57606f;
          --text: #ced6e0;
        }
        * {
          margin: 0;
        }
        html{
          height: 100%;
        }
        body{
          height: 100%;
          font-family: Verdana;
          display: flex;
          flex-direction: column;
          color: var(--text);
        }
        nav{
          padding: 1.2rem;
          background: var(--panel-bg);
        }
        nav a{
            padding: 1.1rem;
        }
        .container{
          flex: 1;
          padding: 1rem;
          background: var(--container-bg);
        }
        footer{
          padding: 1rem;
          background: var(--panel-bg);
        }
        input[type=button] {
          color: var(--text);
          background: var(--panel-bg);

          padding: 0.3rem;
          margin: 0.2rem;
          font-size: 1rem;
        }
        </style>
    </head>
    <body>
        <nav class="navbar"><a>Главная</a>|<a>Контакты</a>|<a>О сайте</a></nav>
        <div class="container">
          <div>
            <input type="button" value="Toggle" id="toggle-theme" />
          </div>
            <h2 class="title">Заголовок</h2>
            <p class="content">Основное содержимое...</p>
        </div>
        <footer>
          <p>Все права разрешены ©2018</p>
        </footer>
        <script>
        const toggleBtn = document.querySelector("#toggle-theme");
        toggleBtn.addEventListener("click", function() {
          if(document.documentElement.hasAttribute("theme")){
            document.documentElement.removeAttribute("theme");
          }
          else{
            document.documentElement.setAttribute("theme", "dark");
          }
        });
        </script>
    </body>
</html>

Просмотреть  пример

В стилях страниц, как  видно из примера  определены фактически 2 темы, которые содержат 3 переменных:

:root{
    --panel-bg: #dfe4ea;
    --container-bg: #f1f2f6;
    --text: #2f3542;
}
:root[theme='dark'] {
    --panel-bg: #2f3542;
    --container-bg: #57606f;
    --text: #ced6e0;
}

Первая тема — светлая, вторая — темная. При темной теме корневой элемент, а это элемент <html> будет иметь атрибут theme=»dark».

Затем эти переменные будут использоваться для установки стилевых свойств отдельных элементов.

Для переключения тем у кнопки через код javascript установлен обработчик нажатия, который и проверяет наличие атрибута «theme» (что будет означать, что установлена темная схема). И при наличии атрибута убирает его, а при его отсутствии, наоборот, устанавливает.

const toggleBtn = document.querySelector("#toggle-theme");
 toggleBtn.addEventListener("click", function() {
    if(document.documentElement.hasAttribute("theme")){
        document.documentElement.removeAttribute("theme");
    }
    else{
        document.documentElement.setAttribute("theme", "dark");
    }
});

Как результат при нажатии на кнопку произойдет глобальное переключение стилей веб-страницы.

Читайте также  Переменные в CSS

 

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Поделиться

Об авторе

admin administrator

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: