Перейти к регистрации

Мы используем куки-файлы (cookie), чтобы обеспечить вам наилучшую работу на нашем веб-сайте и проанализровать его использование. Вы можете найти больше информации о файлах cookie и о том, как мы их используем в нашей политике конфиденциальности. Продолжая использовать этот сайт, Вы даёте согласие на использование файлов cookie. Узнать больше

← Назад к статьям

Как сделать темный режим на сайте: полное руководство с примером кода

Время прочтения - 12 мин.

10 декабря 2025г.

Темный режим добавляет альтернативную цветовую схему для комфортного просмотра в условиях слабого освещения. Реализация строится на двух технологиях: CSS-переменных для управления цветами и медиазапросе `prefers-color-scheme` для автоматического определения системных предпочтений.

Как сделать темный режим

Шаг 1

Подготовка цветовой палитры:
Дизайн темной темы требует создания специальной палитры, а не простого инвертирования цветов. Сначала определяют базовые цвета для светлой темы, затем — их темные аналоги. Рекомендуется использовать темно-серые оттенки, например #121212, вместо чистого черного. Это снижает зрительное напряжение и улучшает восприятие глубины. Все цвета объявляют, как CSS-переменные в корневом селекторе.

Шаг 2

Настройка автоматического режима:
Для учета системных настроек применяют CSS-медиазапрос @media (prefers-color-scheme: dark). Внутри этого запроса переопределяют значения CSS-переменных на цвета темной темы. Поддержка медиазапроса в современных браузерах превышает 97%, что делает его надежным решением. Как отмечает документация MDN Web Docs, `prefers-color-scheme` стал универсально поддерживаемой CSS-медиафункцией.

CSS + возможность ручного переключения через JS

CSS

JavaScript

Шаг 3

Создание ручного переключателя:
Чтобы дать пользователям контроль, в интерфейс добавляют кнопку. JavaScript-обработчик клика переключает CSS-класс, например .theme-dark, на элементе <html>. Этот класс переопределяет переменные на значения темной темы, игнорируя системные настройки.

Шаг 4

Сохранение пользовательского выбора:
Предпочтение темы сохраняют между сессиями через localStorage. При загрузке страницы скрипт проверяет сохраненное значение и применяет тему до отрисовки контента, что предотвращает мерцание (Flash of Unstyled Content, FOUC). В статье "The Quest for the Perfect Dark Mode" рекомендуется инлайнить скрипт в <head> для чтения localStorage и применения класса к <html> до рендера тела страницы.

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

Преимущества темного режима для сайта

Внедрение темного режима перестало быть трендом и стало стандартом ожиданий. Исследование Nielsen Norman Group за 2023 год показывает, что 81% пользователей применяют темный режим хотя бы на одном сайте или в приложении, а более половины переключаются между темами в зависимости от времени суток.

Преимущество	Влияние на пользователя	Влияние на бизнес/сайт
Снижение утомляемости глаз	Улучшает комфорт при длительном чтении, снижает воздействие синего света.	Увеличивает время на сайте; в кейсе Figma 32% сессий проходили в тёмной теме.
Энергоэффективность для OLED/AMOLED экранов	Продлевает работу устройства за счёт отключения чёрных пикселей.	Повышает лояльность мобильных пользователей; исследования Purdue University показывают до 39–47% экономии энергии.
Повышение концентрации на контенте	Уменьшает визуальный шум, помогает сосредоточиться на главном.	Улучшает юзабилити и может повысить конверсию благодаря снижению когнитивной нагрузки.
Признак современного дизайна	Создаёт ощущение технологичности и заботы о пользователе.	Укрепляет бренд как современный и ориентированный на комфорт.
Улучшение доступности (Accessibility)	Помогает людям со светобоязнью и некоторыми нарушениями зрения.	Расширяет аудиторию и демонстрирует приверженность инклюзивному дизайну.

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

Для удобства разработки используют сбалансированную палитру, обеспечивающую достаточный контраст для доступности:

CSS-переменная	Светлая тема	Темная тема
--color-bg	#ffffff	#0f172a
--color-text	#1a1a1a	#f1f5f9
--color-primary	#2563eb	#60a5fa
--color-secondary	#6b7280	#94a3b8
--color-accent	#7c3aed	#a78bfa

Доступность темного режима

Темный режим не должен ухудшать доступность сайта. Основное правило — соблюдение стандартов контрастности WCAG 2.1. Для обычного текста соотношение контраста между цветом текста и фона должно быть не менее 4.5:1 (уровень AA). Для крупного текста минимальный порог — 3:1.

Одна из частых ошибок — использование недостаточно светлого текста на темно-сером фоне. Другая — применение чистого белого на чистом черном. Слишком высокий контраст может вызывать эффект "гало" или "свечения" букв. Material Design 3 и Apple Human Interface Guidelines рекомендуют использовать темно-серые фоны (например, #121212) и регулировать непрозрачность светлого текста. Как отмечает Smashing Magazine в статье "Designing For Dark Mode", одна из самых распространенных ошибок доступности в темных темах — недостаточный цветовой контраст.

Проверять контрастность следует для обеих тем. Для этого используют инструменты вроде встроенного Color Contrast Analyzer в Chrome DevTools.

Принцип расчета контрастности:
Коэффициент рассчитывается на основе относительной яркости цветов (L). Формула: (L1 + 0.05) / (L2 + 0.05), где L1 — большая яркость, L2 — меньшая. Для быстрой проверки пар цветов применяют онлайн-инструменты, которые динамически вычисляют этот коэффициент и показывают соответствие стандартам WCAG AA и AAA.

Примеры сайтов с темным режимом

Для понимания лучших практик изучают реализации крупных платформ:

1. GitHub – Классический пример с несколькими вариантами тем (Dark, Dark Dimmed, Dark High Contrast). Особое внимание уделено адаптации подсветки синтаксиса кода для разных языков программирования.
2. YouTube – Использует глубокий темно-серый фон (`#0f0f0f`), создавая комфортную среду для продолжительного просмотра видео. Визуальная иерархия элементов выстроена за счет разных уровней контраста и теней.
3. X (бывший Twitter) – Предлагает пользователям выбор между "Темной" и "Черной" темами. "Черная" тема (`#000000`) ориентирована на владельцев OLED-экранов для максимальной экономии заряда.
4. Notion и Linear – Представляют темный режим как часть премиального опыта. В них тщательно проработаны полупрозрачные элементы, эффекты размытия и адаптированы все компоненты, включая пользовательский контент.

Проблемы реализации темного режима и их решение

Даже при использовании CSS-переменных разработчики сталкиваются со специфическими проблемами.

1. Изображения и иконки

Логотипы или иллюстрации, созданные для светлого фона, могут резать глаз в темной теме.

Решение: CSS-фильтры типа filter: brightness(0.8) invert(1) hue-rotate(180deg) могут инвертировать изображение, но часто искажают цвета. Более надежный метод — подготовить отдельные версии графики для каждой темы с помощью тега <picture> и атрибута media="(prefers-color-scheme: dark)". Для SVG-иконок оптимально переопределять цвет заливки через CSS-переменные.

2. Тени (box-shadow, drop-shadow)

Темные тени, предназначенные для светлого фона, становятся невидимыми на темном.

Решение: В темной теме пересматривают палитру теней. Вместо черных теней с высокой прозрачностью используют светлые оттенки с низкой непрозрачностью, например, box-shadow: 0 4px 6px rgba(255, 255, 255, 0.1);. Это создает эффект мягкого свечения и глубины.

3. Полупрозрачные элементы и backdrop-filter

Эффекты размытия фона могут по-разному работать в темах.

Решение: Для элементов с backdrop-filter: blur(10px) в темной теме часто добавляют brightness(0.8), чтобы затемнить подложку и улучшить читаемость текста. Важно предусматривать фолбэк — полупрозрачный фон, так как поддержка backdrop-filter в некоторых браузерах может быть ограничена.

4. Сторонние виджеты и реклама

Компоненты, встраиваемые с других сайтов, могут не поддерживать темную тему.

Решение: Часто кардинального решения нет. Можно попытаться обернуть виджет в контейнер с filter: invert(1), но это может сломать его функциональность. Лучшая практика — искать альтернативные сервисы, предлагающие нативную поддержку темной темы.

Заключение

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

Содержание

Как сделать темный режим

Преимущества темного режима для сайта

Доступность темного режима

Примеры сайтов с темным режимом

Проблемы реализации темного режима и их решение

Заключение

Поделитесь статьей
со своими знакомыми:

Заберите полезные материалы и бонусы от Mottor в Telegram

Получите всё для быстрого запуска сайта и получения первых заявок:

📘 План «Сайт и заявки за 7 дней»
🎁 Доступ к 7 бонусам от Mottor
🎯 Промокод до 30 000 ₽ на рекламу в сетях Яндекс
🎓 Гид по интерфейсу и редактированию сайта
💬 Рекомендации по сайту от специалистов mottor

Забрать бонусы в Telegram →

Как сделать темный режим на сайте: полное руководство с примером кода

Как сделать темный режим

Шаг 1

Шаг 2

CSS + возможность ручного переключения через JS

Шаг 3

Шаг 4

Преимущества темного режима для сайта

Доступность темного режима

Примеры сайтов с темным режимом

Проблемы реализации темного режима и их решение

1. Изображения и иконки

2. Тени (box-shadow, drop-shadow)

3. Полупрозрачные элементы и backdrop-filter

4. Сторонние виджеты и реклама

Заключение

Читайте также