Categories: CSSJavaScriptУроки программирования

Как создать простое переключение цветового оформления сайта (CSS и JavaScript)

SebWeo.com

Если вы хотите добавить на свой сайт возможность переключения между светлым/темным цветовым режимом, тогда вы попали по адресу. Хотя такая фича может и не пользоваться спросом, но с ее наличием у вас будет более расширенный функционал. Итак, в этом практическом уроке мы обсудим, как реализовать простое изменение цветовой схемы (переключение на светлый или темный режим) на вашем вебсайте с помощью CSS переменных и нескольких строк JavaScript.

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

Вводное теоретическое слово

В общем, принцип переключения активируется простым изменением классов и CSS стилей для корневого элемента <html>, или же другого (но максимально высшего в DOM) элементе. Хотя желательно учесть и другие важные моменты:

Посетители вашего сайта должны иметь возможность самостоятельно переключать цветовую тему
Цветовую схему сайта можно выбирать автоматически на основе системных настроек и/или предпочтений браузера
Должно быть определение дефолтного значения (цветовая схема по умолчанию)
Желательно сохранять настройки темы (запоминать выбранную схему цвета), чтобы при переходе на другие страницы выбор пользователя не «обнулился»

Это основные требования, теперь давайте углубимся в детали и рассмотрим практические решения!

CSS стилизация страницы на основе выбранной темы

Следовательно, изменение темы происходит с изменением класса корневого элемента. Для примера я использую две кнопки с типом button, при нажатии на которые меняется класс элемента <html> на day/night одной строкой кода JavaScript.

Вот так может выглядеть примерно подобный код:

Некоторые пояснения по коду:

Я использую два атрибута доступности ARIA (Accessible Rich Internet Applications), которые сделают эти кнопки более доступными для людей с ограниченными возможностями. Изменение цвета может не иметь значения для людей с нарушениями зрения, но программа считывания с экрана поможет им лучше сориентироваться на сайте. Атрибуты aria-label скрыты от пользователей, но доступны вспомогательным технологиям.

По умолчанию можно добавить определенный класс к корневому <html> элементу.

При нажатии на кнопки простой JavaScript изменяет класс корневого тэга. А дальше уже нужно использовать CSS стили на основе этих классов.

Переключение цветовых тем сайта — CSS стили

В данном примере я использую довольно простое решение – изменение цветовой схемы сайта только несколькими простыми стилями. Также учел значение по умолчанию, когда пользователь не нажимал кнопку выбора темы. При изменении корневого класса тег body изменяет значения стилей соответственно для переменных фонового цвета и цвета текста.

<style> 
  :root, 
  :root.day { 
    --bg-color: #fff; 
    --text-color: #0c0c0c; 
  } 
  :root.night { 
    --bg-color: #121212; 
    --text-color: #fff; 
  } 
  body { 
    background-color: var(--bg-color); 
    color: var(--text-color); 
  }
</style>

Как выбрать тему автоматически в зависимости от пользовательских настроек

В предыдущем коде я прописал стили для классов, которые так или иначе будут выбраны пользователем. Но чтобы расширить этот функционал, мы также можем выбирать светлый/темный режим на основе настроек системы пользователя. Для этого можно использовать медиа-запрос prefers-color-scheme — CSS функции, которая определяет используемую тему в операционной системе. Пример использования:

<style> 
  @media (prefers-color-scheme: dark) { 
    :root { 
      --bg-color: #121212; 
      --text-color: #fff; 
    } 
  }
</style>

В этом медиазапросе я устанавливаю для переменной :root желаемые цвета для темного режима. Функция медиа-запроса CSS prefers-color-scheme может иметь одно из трех значений: светлый (light), темный (dark), без настроек (no-preference).

Другим вариантом будет использование CSS функции light-dark(), которая принимает всего два аргумента и возвращает один из них в зависимости от того, какую тему выбрал пользователь:

<style> 
  body { 
    color: light-dark(#121212, #ffffff); 
    background-color: light-dark(#ffffff, #121212); 
  }
</style>

Первое значение функция вернет, если у пользователя установлена светлая тема (или тема не выбрана), а второе — если установлена темная тема.

Чтобы функция light-dark() заработала, нужно прописать свойство color-scheme со значением light dark. Обычно это делают для псевдокласса :root. Если это свойство не прописать, то функция будет всегда возвращать только первое значение:

<style> 
  :root { 
    color-scheme: light dark; 
  }
</style>

Как сохранить выбор пользователем темы в локальном хранилище

Когда посетитель переходит со страницы на страницу вашего сайта, выбранная тема не должна изменяться. Одним из вариантов решения этой задачи будет сохранение состояния цветовой темы сайта, чтобы его можно было использовать на других страницах сайта. Лучше всего сохранять это состояние в локальном хранилище (localStorage) браузера. Каждый раз, когда страница сайта будет загружаться, из локального хранилища будет загружаться значение для выбранной темы. Код для этого решения может выглядеть следующим образом:

<script> 
  const setColorScheme = (theme) => { 
    document.documentElement.className = theme; // получить значение текущей темы из разметки 
    localStorage.setItem('themeScheme', theme); // сохранить значение текущей темы в локальном хранилище 
  } 
  const getColorScheme = () => { 
    const theme = localStorage.getItem('themeScheme'); // вернуть значение текущей темы из локального хранилища 
    theme && setColorScheme(theme); // установить текущую тему в соответствии с локальным хранилищем 
  } 
  getColorScheme(); // запуск функции каждый раз при загрузке страницы
</script>

При каждом посещении страниц сайта первая функция будет сохранять выбранную пользователем тему цветовой схемы в локальном хранилище. Далее, каждый раз будет вызываться вторая функция, которая будет синхронизировать данные из локального хранилища и текущей настройки.

Поддержка рассмотренного функционала браузерами

Описанные выше решения полагаются на современные функции браузеров. По некоторым статистическим данным, не поддерживают новейшие решения в CSS/JS лишь немногим более 10% браузеров. Соответственно, чтобы все работало хорошо, желательно использовать новейшие браузеры.

Вместо вывода

Итак, в сегодняшнем практическом уроке мы рассмотрели основные моменты по созданию простого переключателя цветового оформления сайта. Используя только небольшой код CSS и несколько строк JavaScript. Чтобы создать переключатель светлая/темная тема, достаточно сделать 3 следующих шага:

Вызвать JS функции через соответствующие HTML элементы (например, кнопки)
Использовать скрипт JavaScript для изменения класса корневого элемента <html>. Дополнительно можно записывать текущее состояние в локальное хранилище (localStorage)
На основе класса установить цвета темы для корневого элемента :root (<html>) с помощью переменных CSS

Вот и все на сегодня, спасибо за внимание!