Как реализовать поддержку темной темы (dark mode) с помощью HTML и CSS? Какие метатеги и медиавыражения используются?

Question

Темную тему можно реализовать с помощью CSS-медиавыражения prefers-color-scheme, которое определяет предпочтения пользователя относительно цветовой схемы (светлой или темной). В зависимости от предпочтений браузера применяются соответствующие стили. Также можно настроить переключение темы вручную с помощью JavaScript и CSS-классов.

YeaHub · Accepted Answer

Поддержка темной темы в веб-приложениях позволяет пользователям автоматически переключаться между светлой и темной темой на основе их системных настроек. Это достигается с помощью CSS-медиавыражения prefers-color-scheme. Это медиавыражение проверяет, какую цветовую схему предпочитает пользовательская система (светлую или темную), и применяет соответствующие стили.Пример использования медиавыражения для темной темы:/* Стиль по умолчанию (светлая тема) */ body { background-color: white; color: black; } /* Темная тема */ @media (prefers-color-scheme: dark) { body { background-color: black; color: white; } }Это позволяет автоматически применять темную тему, если устройство пользователя настроено на темную цветовую схему.Для мануального переключения между темами с помощью кнопки можно использовать JavaScript. Например, можно хранить состояние темы в localStorage и динамически менять классы в DOM.Пример с JavaScript для ручного переключения темы:const toggleTheme = () => { const theme = document.body.classList.toggle('dark') ? 'dark' : 'light'; localStorage.setItem('theme', theme); }; document.addEventListener('DOMContentLoaded', () => { const savedTheme = localStorage.getItem('theme'); if (savedTheme) { document.body.classList.add(savedTheme); } });С помощью этого кода можно сохранить выбор пользователя и применить его при следующем посещении страницы.Также можно использовать метатеги, такие как theme-color, для изменения цветовой схемы браузера: Эти метатеги настраивают цветовую схему интерфейса браузера в зависимости от темы. Поддержка темной темы делает веб-приложения более адаптивными и улучшает пользовательский опыт.