Как сделать темную тему css
Перейти к содержимому

Как сделать темную тему css

  • автор:

Тёмный режим на уровне ОС

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

Параметры «Общие» в Системных настройках MacOS

Параметры «Общие» в Системных настройках MacOS

Чистый CSS

К счастью, в CSS есть медиа-запрос prefers-color-scheme , который можно использовать для определения системных настроек цветовой схемы пользователя. У него есть три возможных значения: no preference , light и dark . Подробнее об этом читайте на MDN.

@media (prefers-color-scheme: dark) < /* Стили для тёмной темы */ >@media (prefers-color-scheme: light) < /* Стили для светлой темы */ >

Чтобы это всё применить, мы можем поместить стили тёмной темы в медиа-запрос.

@media (prefers-color-scheme: dark) < body < color: #eee; background: #121212; >a < color: #809fff; >>

Теперь, если пользователь включил тёмный режим в системных настройках, то по умолчанию он получит стили тёмного режима. Нам уже не понадобятся JavaScript или серверные скрипты чтобы решать, какой режим использовать. Чёрт возьми, нам даже кнопка больше не нужна!

JavaScript

Мы можем обратиться к JavaScript, чтобы выяснить предпочитаемую пользователем цветовую схему. Это очень похоже на наш первый метод, только для определения предпочтений пользователя используем matchedMedia() .

const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)'); if (prefersDarkScheme.matches) < document.body.classList.add('dark-theme'); >else

Переопределение настроек ОС

Мы только что рассмотрели, как учесть системные предпочтения цветовой схемы пользователя. Но что, если пользователи захотят поменять свои системные предпочтения для сайта? Тот факт, что пользователь предпочитает тёмный режим для своей ОС, не всегда означает, что он выберет такой же и на сайте. Вот почему хорошей идеей будет дать возможность вручную переключать тёмный режим, несмотря на системные настройки.

Давайте воспользуемся пользовательскими свойствами CSS для демонстрации, как это сделать. Идея состоит в том, чтобы определить пользовательские свойства для обеих тем, как мы это делали раньше, обернуть тёмные стили в медиа-запрос prefers-color-scheme , а затем определить внутри него класс .light-theme , который мы можем использовать для переопределения свойств тёмного режима, если пользователь хочет переключаться между двумя режимами.

/* Цвета по умолчанию */ body < --text-color: #222; --bkg-color: #fff; >/* Цвета тёмной темы */ body.dark-theme < --text-color: #eee; --bkg-color: #121212; >/* Стили для пользователей, предпочитающих тёмный режим на уровне ОС */ @media (prefers-color-scheme: dark) < /* Тёмная тема по умолчанию */ body < --text-color: #eee; --bkg-color: #121212; >/* Переопределяем тёмный режим стилями светлого режима, если пользователь решает поменять их местами */ body.light-theme < --text-color: #222; --bkg-color: #fff; >>

Теперь мы можем вернуться к нашей верной кнопке для переключения между светлыми и тёмными темами. Таким образом, мы соблюдаем цветовые предпочтения ОС по умолчанию и позволяем пользователю вручную переключать темы.

// Отслеживаем щелчок по кнопке btn.addEventListener("click", function() < // Если ОС настроена в тёмном режиме… if (prefersDarkScheme.matches) < // …тогда применяем класс .light-theme для переопределения этих стилей document.body.classList.toggle("light-theme"); // В противном случае… >else < // …применяем класс .dark-theme для переопределения светлого стиля по умолчанию document.body.classList.toggle("dark-theme"); >>);

Поддержка браузерами

Медиа-запрос prefers-color-scheme поддерживается основными браузерами, включая Chrome 76+, Firefox 67+, Chrome Android 76+, Safari 12.5+ (13+ на iOS) и Samsung Internet Browser. IE не поддерживает.

Это многообещающая поддержка! Can I Use оценивает охват пользователей как 88,23%.

Операционные системы, которые в настоящее время поддерживают тёмный режим: MacOS (Mojave или новее), iOS (13.0+), Windows (10+) и Android (10+).

Автор: Мохамед Адхухам
Последнее изменение: 05.08.2023

  • Переключение темы
  • Тёмный режим на уровне ОС
  • Сохранение предпочтений пользователя
  • Обработка стилей браузера
  • Комбинируем всё вместе
  • Советы по дизайну
  • Тёмный режим в жизни
  • Итоги

prefers-color-scheme

CSS медиа функция prefers-color-scheme может использоваться для определения того, светлую или тёмную тему использует пользователь в операционной системе.

Синтаксис

Указывает, что пользователь не сделал никаких предпочтений, известных системе. Значение этого ключевого слова оценивается как false в логическом контексте.

Указывает, что пользователь выбрал светлую тему в операционной системе.

Указывает, что пользователь выбрал тёмную тему в операционной системе.

Примеры

В этом примере используется элемент с черным фоном и белым текстом, если пользователь выбрал светлую тему в операционной системе, то цвета будут инвертированы.

HTML

div class="day">Day (initial)div> div class="day light-scheme">Day (changes in light scheme)div> div class="day dark-scheme">Day (changes in dark scheme)div> br /> div class="night">Night (initial)div> div class="night light-scheme">Night (changes in light scheme)div> div class="night dark-scheme">Night (changes in dark scheme)div> 

CSS

.day  background: #eee; color: black; > .night  background: #333; color: white; > @media (prefers-color-scheme: dark)  .day.dark-scheme  background: #333; color: white; > .night.dark-scheme  background: black; color: #ddd; > > @media (prefers-color-scheme: light)  .day.light-scheme  background: white; color: #555; > .night.light-scheme  background: #eee; color: black; > > .day, .night  display: inline-block; padding: 1em; width: 7em; height: 2em; vertical-align: middle; > 

Result

Спецификация

Specification
Media Queries Level 5
# prefers-color-scheme

Переключение темы

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

Использование класса для

Хитрость заключается в замене класса, который будет указателем для изменения стиля на всей странице.

Это пример скрипта для кнопки, переключающей данный класс.

// Выбираем кнопку const btn = document.querySelector('.btn-toggle'); // Отслеживаем щелчок по кнопке btn.addEventListener('click', function() < // Затем переключаем (добавляем/удаляем) класс .dark-theme для body document.body.classList.toggle('dark-theme'); >)

Вот как мы можем использовать эту идею.

  

Основная идея такого подхода состоит в том, что мы стилизуем элементы как обычно, назовём это нашим режимом «по умолчанию». Затем создаём полный набор цветовых стилей с помощью класса, заданного в элементе , который мы можем использовать в качестве «тёмного» режима. Допустим, по умолчанию применяется светлая цветовая схема. Все эти «светлые» стили написаны точно так же, как вы обычно пишете CSS. Учитывая наш HTML, применим глобальный стиль к и к .

body < color: #222; background: #fff; >a

Довольно неплохо. Теперь у нас есть тёмный текст (#222) и тёмные ссылки (#0033cc) на светлом фоне (#fff). Начало нашей темы «по умолчанию» положено.

Теперь переопределим значения этих свойств, но в этот раз для другого класса.

body < color: #222; background: #fff; >a < color: #0033cc; >/* Стили Тёмной темы */ body.dark-theme < color: #eee; background: #121212; >body.dark-theme a

Стили тёмной темы будут потомками того же родительского класса — в нашем примере это .dark-theme , который мы добавили к тегу .

Как «переключать» классы у для доступа к тёмным стилям? Мы можем использовать JavaScript! Выберем класс кнопки ( .btn-toggle ), добавим отслеживание щелчка, а затем вставим класс тёмной темы ( .dark-theme ) в список классов элемента . Это эффективно отменит все установленные нами «светлые» цвета, благодаря каскаду и специфичности.

Вот полный рабочий код в действии. Пощёлкайте по кнопке для переключения на тёмный режим и выхода из него.

Использование разных таблиц стилей

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

К примеру, светлая тема по умолчанию, вроде light-theme.css.

/* light-theme.css */ body < color: #222; background: #fff; >a

Затем создаём стили для тёмной темы и сохраняем их в отдельном файле, который назовём dark-theme.css.

/* dark-theme.css */ body < color: #eee; background: #121212; >body a

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

Мы используем идентификатор #theme-link , который можно выбрать через JavaScript, чтобы снова переключаться между светлым и тёмным режимами. Только на этот раз мы переключаем файлы вместо классов.

// Выбираем кнопку const btn = document.querySelector(".btn-toggle"); // Выбираем таблицу стилей const theme = document.querySelector("#theme-link"); // Отслеживаем щелчок по кнопке btn.addEventListener("click", function() < // Если текущий адрес содержит "light-theme.css" if (theme.getAttribute("href") == "light-theme.css") < // …то переключаемся на "dark-theme.css" theme.href = "dark-theme.css"; // В противном случае… >else < // …переключаемся на "light-theme.css" theme.href = "light-theme.css"; >>);

Использование пользовательских свойств

Мы также можем воспользоваться мощью пользовательских свойств CSS для создания тёмной темы! В итоге нам не придётся писать отдельные наборы правил стилей для каждой темы, при этом значительно ускоряется написание стилей и упрощается внесение изменений в тему, если это понадобится.

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

// Выбираем кнопку const btn = document.querySelector('.btn-toggle'); // Отслеживаем щелчок по кнопке btn.addEventListener('click', function() < // Затем переключаем (добавляем/удаляем) класс .dark-theme для body document.body.classList.toggle('dark-theme'); >)

Сперва определим значения светлых цветов по умолчанию в виде пользовательских свойств для элемента .

body

Теперь мы можем переопределить эти значения для класса .dark-theme , как мы это уже делали в первом методе.

body.dark-theme
body < color: var(--text-color); background: var(--bkg-color); >a

С тем же успехом мы могли бы определить наши пользовательские свойства внутри :root . Это вполне легальная и даже обычная практика. В таком случае все определения стилей темы по умолчанию будут помещены внутрь :root <> , а все свойства темной темы войдут внутрь :root.dark-mode <> .

Использование скриптов на стороне сервера

Если вы уже работали с серверным языком, скажем, PHP, то можете использовать его вместо JavaScript. Это отличный подход, если предпочитаете работать непосредственно с разметкой.

 $themeToggle = ($themeClass == 'dark-theme') ? 'light' : 'dark'; ?>   "> ">Переключатель тёмной темы 

Мы можем попросить пользователя отправить запрос GET или POST. Затем позволим нашему коду (в данном случае PHP) применить соответствующий класс к при перезагрузке страницы. В данной демонстрации я использую запрос GET (параметры URL).

И да, мы можем поменять местами таблицы стилей как во втором методе.

 $themeToggle = ($themeStyleSheet == 'dark-theme.css') ? 'light' : 'dark'; ?>    " rel="stylesheet"> ">Переключатель тёмной темы 

У этого метода есть очевидный недостаток: необходимо обновить страницу, чтобы переключение сработало. Но подобное серверное решение полезно для сохранения выбранной пользователем темы при перезагрузке страницы, как мы увидим позже.

Какой метод выбрать?

«Правильный» метод зависит от требований вашего проекта. Например, если вы работаете над большим проектом, то можете использовать свойства CSS, которые помогут справиться с большой базой кода. С другой стороны, если ваш проект должен поддерживать устаревшие браузеры, тогда потребуется другой подход.

Кроме того, никто не говорит, что мы можем использовать только один метод. Иногда их сочетание оказывается наиболее эффективным вариантом. Могут быть и другие возможные методы, помимо упомянутых.

Автор: Мохамед Адхухам
Последнее изменение: 07.05.2021

  • Переключение темы
  • Тёмный режим на уровне ОС
  • Сохранение предпочтений пользователя
  • Обработка стилей браузера
  • Комбинируем всё вместе
  • Советы по дизайну
  • Тёмный режим в жизни
  • Итоги

Смена светлой и темной тем сайта на CSS

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

Давайте посмотрим, как вы можете сделать это на вашем сайте.

Автоматическое переключение

Начнем с ситуации, когда сайт автоматически будет менять тему в зависимости от настроек компьютера (телефона/планшета).

Стили для светлой темы

:root < --var-bgcolor: #fff; --var-fontcolor: #000; >body

Для автоматической смены светлой темы на темную, воспользуемся css-медиафункций prefers-color-scheme , в которой заменим цвета в переменной:

:root < --var-bgcolor: #fff; --var-fontcolor: #000; >@media (prefers-color-scheme: dark) < :root < --var-bgcolor: #333; --var-fontcolor: #eee; >> body

Теперь, каждый раз, когда на устройстве будет меняться цветовая схема, на сайте она также будет изменяться.

Переключение вручную

Для ручного переключения темы необходимо добавить на сайт чекбокс, при активации которого будет включаться темная дема, а при деактивации — светлая. При нажатии на этот чекбокс будет срабатывать javascript-функция changeTheme . В случае если чекбокс активирован, то функция будет добавлять к body новый аттрибут dark . В противном случае этот аттрибут будет удаляться.

   

Теперь немного изменим css, и сделаем смену значений переменных при наличии аттрибута dark :

:root < --var-bgcolor: #fff; --var-fontcolor: #000; >[dark] < --var-bgcolor: #333; --var-fontcolor: #eee; >body

Как это работает смотрите в видео:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *