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

Чёрный сайт почти всегда означает тёмную тему: светлый текст на тёмном фоне. Сделать её реально за вечер, но если просто залить фон чистым чёрным, страница станет хуже, чем была. Ниже: рабочая палитра, автоматическое переключение под настройку системы, кнопка с запоминанием выбора, что умеют конструкторы и как поручить всё нейросети.

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

Тёмная тема ломается на двух крайностях: фон #000000 и текст #ffffff. Эта пара даёт предельный контраст, и глазу от него тяжело: белые буквы будто расплываются по краям, особенно у людей с астигматизмом. Google в руководстве по тёмной теме предлагает базовым фоном #121212, тёмно-серый: на нём видны слои интерфейса и нет резкого перепада яркости (Material Design, dark theme).

Что портится, когда светлый макет просто инвертируют:

• Тени перестают работать: чёрное на чёрном не видно. Глубину здесь показывают светлотой, поверхность выше значит светлее.
• Насыщенные акценты вибрируют. Ярко-синяя кнопка на чёрном фоне буквально дрожит в глазах, её нужно приглушать.
• Второстепенный текст проваливается: серый, читавшийся на белом, становится еле различимым.
• Картинки и скриншоты с белым фоном превращаются в светящиеся прямоугольники, а чёрный логотип пропадает.

Палитра: что брать вместо чёрного и белого

Рабочий набор для тёмной темы обычно выглядит так:

• Фон страницы: #121212 или близкий тёмно-серый.
• Поверхности (карточки, шапка, окна): на один-два тона светлее фона, например #1e1e1e и #242424.
• Основной текст: не чистый белый, а мягкий светло-серый вроде #e6e6e6.
• Второстепенный текст (подписи, даты): около #a0a0a0, с проверкой контраста.
• Границы: линия должна быть видна, а не угадываться.
• Акцент: тот же фирменный цвет, но с пониженной насыщенностью и поднятой светлотой.

Норма читаемости описана в стандарте доступности WCAG 2.2: обычный текст должен иметь контраст к фону не ниже 4,5:1, крупный текст и границы элементов управления не ниже 3:1 (W3C, WCAG 2.2). Правило одно для обеих тем, но пары цветов у них разные: светлая версия проверку прошла, тёмная это не наследует.

Цвета удобнее сразу вынести в переменные, тогда вторая тема сводится к нескольким строкам. Как вообще устроен фон страницы (цвет, картинка, градиент, видео), разбирали в материале про фон сайта.

:root {
  --bg: #ffffff;
  --surface: #f5f5f5;
  --text: #1a1a1a;
  --muted: #5a5a5a;
  --line: #e0e0e0;
}

body {
  background: var(--bg);
  color: var(--text);
}

Автоматическое переключение под системную тему

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

:root {
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;
    --surface: #1e1e1e;
    --text: #e6e6e6;
    --muted: #a0a0a0;
    --line: #2f2f2f;
  }
}

Строка color-scheme: light dark важна сама по себе: она разрешает браузеру перекрасить то, что вы не стилизуете (поля ввода, полосы прокрутки, чекбоксы). Без неё на тёмной странице остаются белые прямоугольники форм.

С мая 2024 года есть запись короче, функция light-dark(). Она принимает два значения и сама подставляет нужное, но работает только при заданном color-scheme (MDN).

:root {
  color-scheme: light dark;
  --bg: light-dark(#ffffff, #121212);
  --text: light-dark(#1a1a1a, #e6e6e6);
}

Заодно покрасьте полосу браузера на телефоне: мета-тег theme-color принимает атрибут media и отдаёт разный цвет для светлой и тёмной темы (MDN).

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#121212" media="(prefers-color-scheme: dark)">

По теме: Как сделать звук на сайте в 2026: музыка, эффекты и озвучка

Переключатель темы, который помнит выбор

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

1. Опишите обе темы переменными. Светлая в :root, тёмная в блоке @media (prefers-color-scheme: dark), как выше.
2. Добавьте ручное переопределение через атрибут. Селекторы :root[data-theme="dark"] и :root[data-theme="light"] идут после медиавыражения, чтобы выбор человека побеждал системную настройку.
3. Поставьте кнопку в шапку, рядом с навигацией. Как собрать саму шапку, показывали в разборе меню на сайте.
4. Сохраните выбор в localStorage. Одна строка при клике, значение читается на любой странице сайта.
5. Примените сохранённое значение до отрисовки. Скрипт чтения темы ставьте в <head>, иначе страница мигнёт светлым.

/* после медиавыражения */
:root[data-theme="dark"] {
  --bg: #121212;
  --text: #e6e6e6;
}
:root[data-theme="light"] {
  --bg: #ffffff;
  --text: #1a1a1a;
}

<!-- в <head>, до стилей страницы -->
<script>
  var saved = localStorage.getItem('theme');
  if (saved) document.documentElement.dataset.theme = saved;
</script>

<!-- кнопка где угодно в разметке -->
<button id="theme-toggle" aria-label="Сменить тему">Тема</button>

<script>
  var root = document.documentElement;
  document.getElementById('theme-toggle').addEventListener('click', function () {
    var isDark = root.dataset.theme ? root.dataset.theme === 'dark' : matchMedia('(prefers-color-scheme: dark)').matches;
    root.dataset.theme = isDark ? 'light' : 'dark';
    localStorage.setItem('theme', root.dataset.theme);
  });
</script>

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

Тёмная тема в конструкторах сайтов

Готовой кнопки «сделать сайт тёмным» в популярных конструкторах на 2026 год нет, но обходные пути отличаются:

• Тильда. Тёмная и светлая темы появились там в редакторе Zero Block, то есть в интерфейсе дизайнера, а не в режиме для посетителей (блог Тильды). Тёмную версию страницы собирают руками: тёмные блоки плюс свой код.
• Wix. В справке сказано, что переключение светлого и тёмного режима на опубликованном сайте штатно не поддерживается (Wix Help Center). Задачу закрывают приложением из маркета или своим кодом.
• WordPress. Проще всего: плагины вроде WP Dark Mode (каталог WordPress.org) подхватывают системную настройку и ставят кнопку блоком. Плата за удобство: чужие цвета поверх ваших и лишний скрипт.
• Свой HTML и CSS. Самый предсказуемый вариант: полный контроль над каждой парой цветов, ничего лишнего не грузится. Основы вёрстки разбирали в статье про CSS и сборку сайта.

По теме: Как сделать карточку товара для сайта в 2026: каталог и ИИ

Как попросить нейросеть переделать сайт в тёмную тему

Задание «сделай тёмную тему» даёт ровно ту заливку чёрным, с которой началась статья. Отдайте нейросети правила и числа, тогда результат будет пригоден сразу.

Сделай тёмную тему для этого сайта. Требования:
1. Фон не чистый чёрный: базовый #121212, карточки и шапка на тон светлее.
2. Текст не чистый белый: основной #e6e6e6, второстепенный около #a0a0a0.
3. Контраст основного текста к фону не ниже 4.5:1. Посчитай пары и покажи цифры.
4. Акцентный цвет приглуши: понизь насыщенность, подними светлоту.
5. Тени замени границами 1px и разницей светлоты поверхностей.
6. Переключение по prefers-color-scheme плюс кнопка с сохранением в localStorage.
7. Все цвета вынеси в CSS-переменные в :root, захардкоженных значений не оставляй.
Не меняй разметку и тексты. Покажи изменённые файлы целиком.

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

После правки проверьте пять вещей, ошибки почти всегда в них:

1. Контраст пар. Откройте инспектор браузера и наведитесь на цвет текста: коэффициент показан прямо в панели.
2. Формы. Поля ввода, списки, чекбоксы, календарь: без color-scheme они останутся белыми.
3. Картинки и логотип. Логотипу нужна светлая версия, скриншотам с белым фоном помогает мягкая рамка.
4. Границы и наведение. ИИ часто убирает тени и не добавляет ничего взамен, карточки сливаются в общую массу.
5. Ссылки в тексте. Синий по умолчанию на тёмном фоне читается плохо, посещённая ссылка почти пропадает.

Когда тёмная тема помогает, а когда мешает

Тёмная тема это не украшение, а решение под сценарий. Она к месту, если:

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

И скорее вредит, если:

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

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

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

Можно ли сделать сайт чёрным без кода?

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

Почему белый текст на чёрном фоне тяжело читать?

Из-за предельного перепада яркости светлые буквы визуально расширяются, края смазываются, и сильнее всего это чувствуют люди с астигматизмом. Лечится так же: тёмно-серый фон вместо чёрного, светло-серый текст вместо белого, чуть больший межстрочный интервал и не слишком тонкое начертание.

Как проверить контраст, если я не дизайнер?

Двумя способами. Инспектор браузера показывает коэффициент рядом с образцом цвета и подсказывает, проходит ли пара норму. Либо онлайн-проверка вроде WebAIM Contrast Checker, куда вставляют два кода цвета. Ориентир прежний: 4,5:1.

Что делать с логотипом и картинками?

Логотипу готовят вторую, светлую версию и подставляют её тем же медиавыражением prefers-color-scheme через тег <picture>. Фотографиям обычно хватает тонкой рамки цвета границы, чтобы белый край не резал глаз. Иконки удобнее держать в SVG и красить через currentColor: тогда они меняются вместе с текстом.