Перейти к содержанию

Темная тема с использованием CSS

Материал из Викижурнал

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

Основные принципы работы с темами

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

Есть два основных способа реализации тёмной темы:

  1. Использование CSS-переменных и переключения стилей через JavaScript.
  2. Автоматическое применение темы в зависимости от настроек системы через prefers-color-scheme.

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

Использование CSS-переменных для темизации

Один из самых удобных способов внедрения тёмной темы — использование CSS-переменных (custom properties). Это позволяет легко управлять цветами и другими параметрами стилей.

Для начала создадим корневые переменные в :root, которые будут использоваться во всём документе: 

:root {
     --bg-color: #ffffff;
     --text-color: #000000;
 }
 
 .dark-theme {
     --bg-color: #121212;
     --text-color: #ffffff;
 }

Затем применим эти переменные к элементам страницы: 

body {
     background-color: var(--bg-color);
     color: var(--text-color);
     transition: background-color 0.3s, color 0.3s;
 }

Теперь достаточно добавить класс .dark-theme к <html> или <body>, чтобы изменить цвета.

Переключение темы с помощью JavaScript

Чтобы дать пользователю возможность переключаться между светлой и тёмной темой, можно использовать JavaScript: 

const toggleThemeBtn = document.getElementById('theme-toggle');
 
 toggleThemeBtn.addEventListener('click', () => {
     document.documentElement.classList.toggle('dark-theme');
 
     // Сохраняем выбор пользователя в localStorage
     if (document.documentElement.classList.contains('dark-theme')) {
         localStorage.setItem('theme', 'dark');
     } else {
         localStorage.setItem('theme', 'light');
     }
 });
 
 // Проверяем сохранённые настройки при загрузке страницы
 if (localStorage.getItem('theme') === 'dark') {
     document.documentElement.classList.add('dark-theme');
 }

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

Автоматическое определение системной темы

Если хочется учитывать системные настройки пользователя, можно использовать prefers-color-scheme. Этот медиа-запрос автоматически применяет нужную тему: 

@media (prefers-color-scheme: dark) {
     :root {
         --bg-color: #121212;
         --text-color: #ffffff;
     }
 }

Этот метод удобен, так как он сразу адаптирует сайт под системные предпочтения. Однако если пользователь хочет самостоятельно выбрать тему, придётся комбинировать этот подход с JavaScript.

Объединение автоматического определения и ручного выбора

Чтобы учесть оба метода, можно сначала проверить, есть ли сохранённый выбор темы в localStorage. Если нет, применить системные настройки: 

const userTheme = localStorage.getItem('theme');
 const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
 
 if (userTheme) {
     document.documentElement.classList.toggle('dark-theme', userTheme === 'dark');
 } else {
     document.documentElement.classList.toggle('dark-theme', systemTheme === 'dark');
 }

Создание удобного переключателя

Теперь добавим кнопку для смены темы в HTML:

<button id="theme-toggle">Переключить тему</button>

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

Улучшение анимации перехода

Чтобы смена темы выглядела плавно, можно добавить анимацию: 

* {
     transition: background-color 0.3s, color 0.3s;
 }

Это создаст эффект мягкого затемнения или осветления при смене темы.

Пример переключения светлой и тёмной тем

Потестировать код на отдельной странице

Заключение

Реализация тёмной темы на сайте с помощью CSS и JavaScript — относительно простая, но важная задача. Использование CSS-переменных делает код удобным и масштабируемым, а сочетание prefers-color-scheme и localStorage даёт пользователю гибкость в выборе. В результате сайт будет адаптивным и комфортным для работы в любых условиях освещения.

Статьи по теме CSS

Источник — https://ru.wikijournal.org/w-wiki/index.php?title=Темная_тема_с_использованием_CSS&oldid=13894