Статьи

Тёмная тема в 2026: как сделать правильно и не сломать дизайн

4 августа 2026  |  6 мин чтения

ОС-режим «тёмная тема» включён у 50–70% пользователей мобильных устройств. Для tech-сайтов, SaaS и блогов отсутствие тёмной темы в 2026 году уже воспринимается как дефект. Но простое «инвертировать цвета» ломает дизайн. Разбираем, как сделать dark mode правильно — с кодом и без боли.

Почему «чистый чёрный» — ошибка

Главная ошибка новичков — фон #000000 с белым текстом. Чистый чёрный даёт максимальный контраст и быстрее утомляет глаза (halation — эффект ореола). Практика 2026: слоистый тёмно-серый вместо плоского чёрного:

:root {
    --bg-base:    #121212; /* основной фон */
    --bg-raised:  #1e1e1e; /* карточки, модалки */
    --bg-overlay: #2a2a2a; /* поверх поверхностей */
    --text-primary: #e8e8e8;
    --text-secondary: #a0a0a0;
    --accent: #4f8cff;
    --border: rgba(255,255,255,0.08);
}

Серые оттенки дают глубину: иерархия поверхностей видна, глазам комфортно. Тёмные интерфейсы должны быть приглушёнными (desaturated), а не кричащими.

Два механизма: система и тумблер

Правильная реализация 2026 — комбинация обоих подходов:

  • Системный уровень: медиазапрос prefers-color-scheme автоматически применяет тему, выбранную в ОС.
  • Переключатель на сайте: пользователь может переопределить системную тему, выбор сохраняется в localStorage.
/* 1. По умолчанию — светлая */
:root { --bg: #ffffff; --text: #111111; }

/* 2. Системная тёмная */
@media (prefers-color-scheme: dark) {
    :root { --bg: #121212; --text: #e8e8e8; }
}

/* 3. Ручное переопределение пользователя */
[data-theme="dark"] { --bg: #121212; --text: #e8e8e8; }
[data-theme="light"] { --bg: #ffffff; --text: #111111; }

JS-логика: сначала читаем localStorage, если пусто — смотрим matchMedia('(prefers-color-scheme: dark)'), вешаем атрибут на <html>. И всё — остальной CSS работает на переменных.

Контраст и доступность

  • Текст на тёмном фоне должен быть чуть жирнее: светлый текст «оптически тоньше» — увеличьте вес на один уровень (400 → 500) или трекинг на 0,01–0,02em.
  • Межстрочный интервал 1,4–1,5 — на тёмном фоне текст сжимается визуально.
  • WCAG: контраст текста не ниже 4,5:1, для крупного — 3:1. Проверяйте не только светлую, но и тёмную тему.
  • Цвета-акценты приглушайте: яркие насыщенные цвета на тёмном фоне вибрируют. Снижайте насыщенность акцентов в тёмной теме.
  • Тени: в тёмной теме обычные тени не работают — используйте бордеры rgba(255,255,255,0.08) вместо box-shadow.

Изображения, логотипы и сторонние виджеты

Самый частый источник поломок — контент, который не знает про вашу тему:

  1. Логотипы: используйте SVG с currentColor или две версии логотипа через prefers-color-scheme в атрибуте media тега <picture>.
  2. Фотографии: слишком яркие фото слепят на тёмном фоне — лёгкое снижение яркости (filter: brightness(0.9)) на контейнер сработает.
  3. Карты, плееры, iframe: подписи и UI сторонних сервисов останутся светлыми — либо принимайте это, либо ищите их тёмные API-режимы.
  4. Осветлённые PNG-иконки на прозрачном фоне — инвертируйте через CSS-фильтр в тёмной теме.

Что смотреть в будущем

В 2026–2027 появляются удобные инструменты: функция light-dark() из CSS Color Module 5, которая позволяет объявлять оба цвета в одном месте:

:root {
    color-scheme: light dark;
}
body {
    background: light-dark(#ffffff, #121212);
}

Поддержка растёт — после проверки caniuse это упростит реализацию вдвое.

Чек-лист внедрения

  • Переведите все цвета в CSS-переменные до старта — иначе тема сломается.
  • Реализуйте системный + ручной режимы (localStorage).
  • Проверьте контраст 4,5:1 в обеих темах.
  • Протестируйте на OLED-телефоне и в ночное время.
  • Не используйте чистый чёрный; приглушайте акценты.
«Тёмная тема — это не фильтр на готовый сайт, а часть дизайн-системы. Если темы проектируют параллельно, а не „перекрашивают перед релизом“, результат стабилен в обеих. Иначе — битый дизайн и негатив» — практика UI/UX, 2026.

Начните с перевода цветов на переменные — это 80% работы. Затем добавьте медиазапрос и тумблер — и тема заработает сама, как на этом сайте.