Как добавить тёмную тему на сайт или в приложение (без белой вспышки)

Чтобы добавить тёмную тему, определите цвета как именованные токены (фон, текст, поверхность, граница, акцент) вместо жёстко прописанных значений, задайте каждому токену светлое и тёмное значение и переключайте их с помощью медиапризнака CSS prefers-color-scheme, чтобы сайт следовал системной настройке посетителя. Если нужен и ручной переключатель, сохраняйте выбор в браузере и применяйте его маленьким встроенным скриптом в head страницы, чтобы не было белой вспышки при загрузке. Затем проверьте контраст, изображения и графики в обеих темах. В ИИ-конструкторе один понятный промпт сделает большую часть работы; качество определяет как раз проверка.

Два подхода

Большинству приложений лучше всего второй вариант: уважать системную тему по умолчанию и дать людям возможность переопределить её.

Начните с токенов цветов

Тёмная тема мучительна, когда цвета разбросаны по коду как white, #333 и gray-100. Всё становится просто, когда каждый цвет берётся из небольшого набора именованных токенов:

Каждый компонент использует имена токенов. Тогда смена темы — это замена одного набора значений, а не правка каждого компонента.

Советы по тёмной палитре:

• Избегайте чисто чёрного и чисто белого для больших областей: очень тёмно-серый и не совсем белый легче читаются.
• Показывайте глубину более светлыми поверхностями, а не тенями — тени почти не видны на тёмном фоне.
• Слегка приглушайте яркие фирменные цвета: на тёмном фоне они могут неприятно светиться.
• Следите за читаемым контрастом. Уровень AA по WCAG требует контраста не меньше 4,5:1 для обычного текста. Приглушённый серый текст в тёмных темах часто этого не проходит.

С Tailwind CSS

Tailwind — инструмент стилей по умолчанию во многих приложениях, созданных с ИИ. По документации Tailwind о тёмной теме вариант dark: по умолчанию использует prefers-color-scheme, поэтому классы вроде bg-white dark:bg-gray-900 следуют системной настройке без дополнительной работы.

Для ручного переключателя в Tailwind v4 документация показывает, как перевести вариант на класс у родительского элемента:

@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

Затем приложение добавляет или убирает класс dark у корневого элемента. В документации также предложен встроенный в head скрипт, который применяет сохранённый выбор (или системную настройку) до отрисовки страницы — именно так избегают вспышки.

Как убрать белую вспышку

Вспышка возникает потому, что страница отрисовывается в светлой теме, затем загружается JavaScript, читает сохранённый выбор и переключает на тёмную. Решение:

1. Поставьте крошечный встроенный скрипт в head страницы, который читает сохранённую тему и задаёт класс корневому элементу до того, как что-либо отрисуется.
2. Задайте для каждой темы CSS-свойство color-scheme, чтобы элементы, которые рисует браузер (полосы прокрутки, элементы форм), совпадали с темой.
3. Задайте странице явный цвет фона в обеих темах.
4. Если приложение рендерится на сервере, убедитесь, что сервер и браузер согласны о начальной теме, иначе страница может перерисоваться и мигать.

Примеры промптов

Полная настройка:

Добавь тёмную тему. Сначала замени жёстко прописанные цвета токенами темы (фон, поверхность, текст, приглушённый текст, граница, акцент) со светлыми и тёмными значениями. По умолчанию следуй системной настройке посетителя. Добавь переключатель темы в шапке с вариантами «Светлая», «Тёмная» и «Системная», запоминай выбор в localStorage и применяй его встроенным скриптом в head, чтобы не было белой вспышки при загрузке. Задай color-scheme для каждой темы. Светлый дизайн оставь ровно таким, какой он есть.

Доработка оставшегося:

Проверь каждую страницу в тёмной теме и исправь: текст с низким контрастом (стремись к 4,5:1 минимум), жёстко заданные белые фоны, границы, которые пропадают, графики с тёмным текстом на тёмном фоне и логотипы, которые исчезают. Светлую тему не меняй.

Изображения и графики:

В тёмной теме используй светлую версию логотипа. Пусть оси, линии сетки и подписи графиков используют токены темы. Дай скриншотам тонкую границу в тёмной теме, чтобы они не сливались с фоном.

Пошагово

1. Проведите аудит цветов. Найдите жёстко заданные цвета и замените их токенами. Это основная часть работы.
2. Задайте тёмные значения для каждого токена.
3. Следуйте системной теме с prefers-color-scheme (или с dark: по умолчанию в Tailwind).
4. Добавьте переключатель, если хотите: «Светлая», «Тёмная», «Системная». Сохраняйте выбор в браузере; для приложений с входом можно также сохранять его в профиле пользователя.
5. Предотвратите вспышку встроенным скриптом в head и color-scheme.
6. Проверьте сложные места: логотипы, иконки, изображения с белым фоном, графики, блоки кода, карты, встраивания, письма.
7. Протестируйте обе темы на компьютере и телефоне, при системной светлой и тёмной теме и после жёсткого обновления страницы.

Частые ошибки

• Инвертировать всё. Фильтр, инвертирующий цвета, портит фотографии и фирменные цвета.
• Оставленные жёсткие цвета. Одна белая карточка на тёмной странице сразу бросается в глаза.
• Серый текст с низким контрастом. Выглядит стильно, но плохо читается.
• Белая вспышка при загрузке. Особенно заметна на телефонах ночью.
• Забытые сторонние встраивания. Карты, видео и виджеты могут остаться светлыми; проверьте, есть ли у них тёмный вариант.
• Переключатель только с двумя состояниями. Как только человек нажал его, он не может вернуться к следованию системе.
• Поломка светлой темы. Прямо укажите в промпте, что светлый дизайн должен остаться прежним.

Чек-лист

• Все цвета берутся из токенов темы
• По умолчанию следует системной настройке
• Есть необязательный переключатель «Светлая», «Тёмная», «Системная», который запоминается
• Нет белой вспышки при загрузке или обновлении
• Задан color-scheme, чтобы элементы форм и полосы прокрутки совпадали
• Контраст текста не ниже 4,5:1 в обеих темах
• Логотипы, изображения, графики и встраивания проверены в тёмной теме
• Светлая тема не изменилась
• Проверено на компьютере и телефоне

Тёмная тема в Mythex

Приложения на Mythex по умолчанию используют Vite, React, TypeScript и Tailwind, поэтому подход с Tailwind из этого гида применим напрямую: вставьте промпт полной настройки в чат, затем проверьте Preview в обеих темах и на размере телефона. Совет Mythex по промптам дизайна — называть, что менять и что оставить, и здесь это важно: прямо скажите, что светлая тема должна остаться как есть. См. Промпты для дизайна и интерфейса и откатывайтесь к чекпоинту, если проход пошёл не так.

Больше о том, как добиться нужного вида, см. как сделать красивое приложение с помощью ИИ и как писать промпты для ИИ-конструкторов приложений.

Вопросы