Как сделать темную тему на сайте: светлая, тёмная и выбор читателя

Чтобы сделать тёмную тему на своём сайте, задайте две палитры цветов, переключайте их по настройке устройства и, если нужно, добавьте кнопку выбора. Понадобится доступ к стилям сайта или настройкам конструктора. Здесь меняем ваш сайт для всех посетителей, а не затемняем чужие страницы в собственном браузере.

Как выбрать способ для вашего сайта

Если конструктор уже предлагает две темы и переключатель, используйте его и проверьте каждый шаблон страницы. Если есть доступ к CSS, задайте цвета через переменные и правило prefers-color-scheme. Оно читает предпочтение посетителя, которое задаёт система или браузер (MDN). Ручная кнопка нужна, когда человек должен менять тему независимо от устройства.

• Конструктор: найдите в настройках дизайна светлую и тёмную палитры. До публикации проверьте, распространяются ли они на формы, карточки и встроенные блоки.
• CSS без кнопки: посетитель получает тему по настройке устройства. Это короткий путь для статического сайта.
• CSS с кнопкой: сайт помнит выбор посетителя в этом браузере. Понадобится небольшой скрипт и проверка работы без него.

Если вы ещё выбираете основу проекта, в разборе платформ для сайта есть критерии выбора конструктора. Для сайта, который собираете сами, сначала полезно определить структуру страниц по руководству по созданию сайта. Тему добавляйте после того, как есть реальный текст и формы: на пустом макете легко не заметить плохой контраст.

Как собрать две палитры через CSS

Начните с именованных переменных для фона, текста, карточки, границы и ссылки. Тогда отдельный блок не сохранит случайно светлый фон при тёмном тексте. color-scheme сообщает браузеру, какие системные цвета элементов и формы допустимы; само по себе оно не перекрашивает весь ваш дизайн (web.dev).

:root { color-scheme: light dark; --bg: #ffffff; --text: #202124; --card: #f2f3f5; --line: #c7c9cc; --link: #1558b0; }
body { background: var(--bg); color: var(--text); }
a { color: var(--link); }
.card { background: var(--card); border: 1px solid var(--line); }
@media (prefers-color-scheme: dark) {
  :root { --bg: #17191c; --text: #f2f3f5; --card: #25282c; --line: #777d85; --link: #9dc4ff; }
}

Это минимальный пример, а не готовая палитра для любого бренда. Перенесите в переменные реальные цвета кнопок, уведомлений и полей. Не задавайте только фон: ссылка, граница, подсказка и состояние ошибки могут исчезнуть на новом фоне. Укажите в начале страницы <meta name="color-scheme" content="light dark">, чтобы браузер раньше выбрал подходящий вид собственных элементов (MDN).

По теме: Как сделать интерактивный сайт: фильтр карточек с проверкой

Как дать посетителю кнопку выбора

Правило выбора простое: явно выбранная на сайте тема имеет приоритет, иначе работает системная. Сохраните только значение light или dark в localStorage и назначайте его корневому элементу до вывода страницы. Цветовая настройка не является секретом, поэтому такое хранение уместно; данные входа и ключи туда помещать нельзя. После нажатия кнопки меняйте сохранённое значение и атрибут корня.

1. Добавьте кнопку с понятным названием «Переключить тему» и состоянием, доступным с клавиатуры. Не прячьте её внутри картинки без подписи.
2. Передайте разработчику правило приоритета: сохранённый выбор, затем системная настройка. В коде принимайте только light и dark; неизвестное значение сбрасывайте.
3. Для ручной темы добавьте CSS-правила на html[data-theme="dark"] и html[data-theme="light"]. Их ставьте после системного правила, чтобы выбор человека действительно побеждал.
4. Проверьте переключение и перезагрузку в этом браузере. Очистите данные сайта: без сохранённого выбора страница должна снова следовать системе.

Если скрипт выключен или хранилище недоступно, базовая светлая тема и системное CSS-правило должны продолжать работать. Кнопку в таком режиме можно скрыть. При ручной теме одного color-scheme: light dark недостаточно: назначьте color-scheme: dark или light вместе с палитрой, иначе поля браузера могут получить чужую окраску (MDN).

Сначала проверьте читаемость и работу форм в обеих темах. Красивый тёмный фон бесполезен, если посетитель не видит подпись поля или сообщение об ошибке.

Как проверить результат перед публикацией

Откройте главную, длинную статью, форму и страницу с карточками. Пройдите чек-лист сначала при светлой настройке системы, затем при тёмной, а потом после ручного выбора. Для обычного текста ориентир WCAG 2.2 уровня AA составляет 4,5:1, для крупного текста 3:1 (W3C). Это порог контраста, а не автоматическая гарантия удобства.

• Текст, ссылки, подписи и ошибки читаются на своём фоне; текст на кнопке виден при наведении и фокусе.
• Форма заполняется с клавиатуры: видны курсор, фокус, отметки обязательных полей и сообщение об ошибке.
• Логотипы, фотографии, диаграммы и встроенные виджеты не теряют смысл. У изображения с белым фоном остаётся граница или подложка.
• После обновления и перехода между страницами ручной выбор сохраняется. На новом устройстве без сохранённого выбора работает системная тема.

Полезно отдельно открыть сайт без JavaScript: посетитель всё равно должен читать контент, а системная тема должна меняться через CSS. Если делаете сайт с ИИ, попросите его перечислить все места с жёстко заданными цветами и показать diff до публикации. Общий чек-лист безопасного сайта поможет не забыть проверку формы после визуальной правки.

По теме: Как сделать политику конфиденциальности на сайт: план и проверка

Что делать, если тема работает не везде

Белая карточка в тёмной теме обычно означает цвет, заданный напрямую в стиле блока: замените его переменной. Белая вспышка при открытии часто появляется, когда сохранённую тему назначают после отрисовки; применяйте выбор до подключения основного CSS, а системную тему оставляйте запасным вариантом. Если изображение стало слишком ярким, не затемняйте все изображения общим фильтром: отдельная подложка или адаптированная версия сохранят цвета товара.

Если тема не переключается внутри стороннего виджета, посмотрите его собственные настройки: ваш CSS может не управлять содержимым чужого iframe. Если в конструкторе нет доступа к цветам всех блоков, не обещайте посетителю полную тёмную тему. В таком случае достаточно одной качественной светлой темы или перехода на шаблон с полноценной поддержкой двух палитр.

Частые вопросы

Можно ли сделать тёмную тему только CSS?

Да. Для автоматического выбора по настройке устройства достаточно двух палитр и prefers-color-scheme. Чтобы запомнить выбор по кнопке, обычно добавляют скрипт.

Почему тёмная тема не включается у посетителя?

Проверьте настройку устройства, наличие правила prefers-color-scheme и сохранённый ручной выбор. Старый выбор может иметь приоритет над системным.

Нужно ли делать чёрный фон?

Нет. Выбирайте фон и цвет текста парой, затем проверяйте контраст реального текста, ссылок и подписей.

Будет ли тема работать в чужом виджете?

Только если виджет сам поддерживает переключение или наследует цветовую схему. Содержимое отдельного iframe ваш стиль обычно не меняет.