В браузере уже темно, а интерфейс всё ещё слепит? Тёмная тема без боли решает эту и сотню других мелких раздражений. Мы покажем, как за пять минут настроить автоматическое переключение палитр через CSS custom properties, сохраняя чистый код и спокойствие команды.
- Экономим до 30 % времени на поддержку тем.
- Оставляем в дизайн-системе единый источник цветов.
- Автоматически подстраиваемся под prefers-color-scheme.
- Даём пользователю ручной переключатель без JavaScript-хаоса.
Зачем веб-приложению тёмная тема без боли?
Первое включение dark-mode часто напоминает ночной штурм багов: всплывают белые полосы, логотип теряется, кнопки расползаются. Представьте, что вместо цепочки `:root.dark` селекторов вы меняете одно значение в таблице токенов — и приложение послушно темнеет. Зачем тратить спринт на патчи, когда браузер уже умеет слушать предпочтения пользователя? Разве не лучше вывести заботу о зрении в базовую функцию интерфейса?
Сделайте так:
- Проверьте поддержку `prefers-color-scheme` нужными браузерами.
- Определите core-токены: `—color-bg`, `—color-text` и т.д.
- Разведите значения токенов по темам: _light_ и _dark_.
- Подключите переключение через медиавыражение.
- Добавьте пользовательский toggle на случай ручного выбора.
/* 1. Базовая светлая палитра */
:root {
--color-bg: #ffffff;
--color-text: #1a1a1a;
--color-primary: #005cff;
}
/* 2. Перекрытие при тёмной теме */
@media (prefers-color-scheme: dark) {
:root {
--color-bg: #121212;
--color-text: #e0e0e0;
--color-primary: #5b8cff;
}
}Мини-вывод: одна таблица токенов заменяет десятки микроправок, а медиавыражение бесплатно включает темноту.
- ПОКАЖЕМ, КАК РАЗВЕРНУТЬ МОДЕЛЬ нейросети DEEPSEEK R1 ПРЯМО НА СВОЁМ КОМПЬЮТЕРЕ
- Где и как применять? Потестируем модель после установки на разных задачах
- Как дообучить модель под себя?
Как внедрить тёмную тему без боли с CSS custom properties?
Один проект — две палитры, но хочется один CSS-файл. Custom properties спасают: они живут в runtime, наследуются и переопределяются. Значит, можно подменить только дифф, оставив типографику и layout нетронутыми. Бонус: дизайн-система получает новые токены, а разработчики — предсказуемый API.
Сделайте так:
- Соберите список семантических цветов.
- Назовите токены по смыслу, а не по HEX.
- Сгруппируйте их в табличку light/dark.
- Храните таблицу рядом с Figma—экспортом.
- Сгенерируйте CSS через скрипт.
| Token | Light | Dark |
| —color-bg | #ffffff | #121212 |
| —color-surface | #f7f7f7 | #1e1e1e |
| —color-border | #dcdcdc | #333333 |
| —color-text | #1a1a1a | #e0e0e0 |
| —color-primary | #005cff | #5b8cff |
Мини-вывод: один прайс-лист токенов превращает хаотичные HEX-фиксы в управляемый инвентарь.
Как автоматизировать переключение палитр через `prefers-color-scheme`?
Что, если отдать выбор самому устройству? Браузер сообщает систему координат через медиавыражение, а наша таблица токенов мгновенно перестраивает тему. Но пользователю всё равно нужен выключатель, иначе ночь в офисе станет сюрпризом. Мы объединим автоматический слушатель и ручной override без сантиметра глобального стейта.
Сделайте так:
- Навесьте класс `.theme-dark` на `<html>` при ручном выборе.
- Храните выбор в `localStorage`.
- На стартовой инициализации проверьте `storage` → иначе доверяйте `prefers-color-scheme`.
- Смену темы оформите как `document.documentElement.classList.toggle()`.
- Используйте event‐listener `change` c `matchMedia` для live-апдейта.
const mql = window.matchMedia('(prefers-color-scheme: dark)');
const saved = localStorage.getItem('theme');
applyTheme(saved ?? (mql.matches ? 'dark' : 'light'));
mql.addEventListener('change', e => {
if (!localStorage.getItem('theme')) applyTheme(e.matches ? 'dark' : 'light');
});
function applyTheme(mode) {
document.documentElement.classList.toggle('theme-dark', mode === 'dark');
}Мини-вывод: автоматизация + ручной каскад дают гибкость, не усложняя логику.
Протестируйте демо прямо сейчас и поделитесь результатом с коллегами — пусть команда увидит, как интерфейс адаптируется сам.
Как расширить дизайн-систему токенами под тёмную тему без боли?
Палитра — только начало. Настоящая сила CSS-переменных в том, что они каскадны. Хотите динамический blur-фон или адаптивный border-radius? Просто добавьте слой абстракции. С каждой новой переменной вы уменьшаете дубликаты кода и повышаете читаемость. Кто сказал, что токены — это только цвета?
Сделайте так:
- Введите атомарные токены: цвет, размер, тень.
- Выведите композиционные токены: card-bg, button-shadow.
- Протестируйте в Storybook две темы.
- Сгенерируйте контраст-репорт автоматом.
- Обновите CI-проверки под WCAG.
/* Абстрактный уровень */
:root {
--radius-s: 4px;
--radius-m: 8px;
--elevation-1: 0 1px 3px rgba(0,0,0,.1);
}
/* Тематический уровень */
.card {
background: var(--color-surface);
border-radius: var(--radius-m);
box-shadow: var(--elevation-1);
}Мини-вывод: кастомные свойства превращают тёмную тему из спец-режима в полноценный слой дизайн-системы.
Финальный чек-лист «Тёмная тема без боли»
| Шаг | Действие | Итог |
| 1 | Создайте таблицу токенов light/dark | Единый источник правды |
| 2 | Подключите `prefers-color-scheme` | Автоматический отклик на ОС |
| 3 | Добавьте пользовательский toggle | Гибкость выбора |
| 4 | Сохраняйте выбор в `localStorage` | Персистентность сессии |
| 5 | Расширяйте токены на размеры/тени | Масштабируемая дизайн-система |
| 6 | Добавьте контраст-тест в CI | WCAG без ручных проверок |
Теперь у вас есть рецепт, который превращает тёмную тему из баг-трекера в конкурентное преимущество.
- Выполним базовые задачи на российских нейросетях и посмотрим на результаты!
- Файл-инструкцию «Как сделать нейро-фотосессию из своего фото бесплатно, без иностранных карт и прочих сложностей»
- Покажем 10+ способов улучшить свою жизнь с ИИ каждому — от ребенка и пенсионера до управленца и предпринимателя
- Возможность получить Доступ в Нейроклуб на целый месяц
- Как ИИ ускоряет работу и приносит деньги
- За 2 часа вы получите четкий план, как начать работать с ИИ прямо сейчас!
