Светлая тема на сайте и темная тема на сайте – примеры, ассоциации, идеи.

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

Светлая тема на сайте

«Много воздуха и свободного пространства, лаконичность, воздушность» — так можно описать задачу для светлого сайта. За этими словами стоит вполне конкретная работа: свободные поля вокруг текста, понятные интервалы между блоками, спокойный фон и заметные акценты. Воздух создаёт композиция, а не один только белый цвет. Если тесно поставить на страницу десятки элементов, светлый фон сам по себе её не разгрузит.

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

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

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

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

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

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

Темная тема на сайте

Тёмную тему можно использовать, чтобы привлечь внимание к продукту, выделиться и запомниться. Но сам цвет фона ещё не делает сайт необычным. Мы бы рассматривали его как инструмент композиции: что должно выйти на первый план, где нужны паузы, какие детали фотографии хочется подчеркнуть? Вместо погони за «возвращением тренда» полезнее ответить на эти вопросы для своего проекта.

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

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

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

Обобщить замысел сайта на тёмном можно таким образом: премиальный, статусный или особый продукт либо услуга, сочетающие разные смыслы и ценности и представляющие собой нечто целостное, законченное. В таком макете можно поставить задачу показать отличия от аналогов. Это возможный образ, а не обещанный эффект для каждого посетителя. Приёмы работы с фоном и акцентами разбираем также в статье о чёрном цвете в веб-дизайне.

При этом тёмная тема не обязательно означает чистый чёрный. В руководстве Material Design 2 тёмно-серые поверхности объясняются тем, что на них легче различать тени и глубину интерфейса. Пример базовой поверхности там — #121212. Руководство относится к прежней, уже не поддерживаемой версии Material; этот пример помогает понять принцип, а не задаёт обязательный цвет сайта.

Попробуйте отделить карточку от общего фона более светлой поверхностью, а всплывающее окно — следующим оттенком. Так можно выстроить иерархию, сохранив тёмный характер страницы. Чистый чёрный тоже можно использовать, если он подходит замыслу. Решение проверяйте вместе с текстом, фотографиями и состояниями кнопок: «темнее» само по себе не означает «удобнее».

Что выбрать — темную или светлую тему на сайте?

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

Белая или светлая тема — тоже универсальный кандидат для сравнения. Это не освобождает от работы над контрастом и структурой: светло-серый мелкий текст на почти белом фоне нужно проверять так же внимательно, как серый текст на чёрном.

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

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

Бывает, решение принимается владельцем бизнеса или заказчиком на основе его собственных предпочтений. Кто-то просто любит светлые сайты, а кто-то тёмные. Но в этом случае легко забыть, что ровно то же самое относится и к его клиентам — кто-то из них предпочитает светлые сайты, а кто-то тёмные! MDN описывает способ учитывать это предпочтение из настроек системы или браузера.

Если посетители уходят со страницы, мы бы проверили, что именно им мешает: текст, навигация, изображения, предложение или выбранная тема. Сам факт ухода ещё не объясняет причину. Попросите людей найти нужную информацию в обоих макетах и посмотрите, где возникают затруднения. Это даст более полезную основу для решения, чем догадка «им что-то не нравится».

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

Компромисс 1: чередование светлого и темного

Это простое и само собой напрашивающееся решение: чередовать фоны при скролле страницы сайта. Первый экран может быть тёмным, далее следует фото команды или продукта на белом фоне, в следующем блоке — снова тёмный фон. Или же меняются фоны в отдельных инфоблоках. Цвет текста в блоках соответственно также чередуется — где-то он чёрный или тёмный, где-то белый или светлый.

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

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

При этом важно, чтобы у сайта были другие связующие цветовые элементы — в противном случае получится «зебра». Сохраните общую сетку, размеры заголовков, форму кнопок и логику акцентов. Тогда смена фона будет поддерживать смысл, а не дробить страницу на случайные полосы.

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

Компромисс 2: две цветовые версии

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

Можно использовать и необычный механизм переключения тем: например, изначально экран поделен вертикальной чертой на две части и можно потянуть ползунок в ту или другую сторону, «осветляя» или «затемняя» сайт соответственно.

При этом дайте сменить тему щелчком или касанием без перетаскивания — например, отдельными кнопками. Такую альтернативу предусматривает критерий 2.5.7 WCAG 2.2. Переключатель должен работать и с клавиатуры: это отдельное требование критерия 2.1.1.

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

Кстати, дело далеко не всегда в одних лишь цветовых предпочтениях. Здесь речь скорее идёт об адаптации сайта под конкретного пользователя и ситуацию, в которой он находится. В документации Android Developers среди преимуществ тёмного режима названо удобство использования при слабом освещении. Но это не основание выбирать одну тему за всех или объявлять её полезнее для зрения.

Как в интерфейсе чтения электронной книги, возможность сменить фон можно рассматривать как персональную настройку. Адаптация веб-проекта при этом шире наличия мобильной версии, режима для слабовидящих или озвучивания текста. Смена фона — одна из возможностей; контраст, управление с клавиатуры и понятные подписи нужны в самом интерфейсе, в какой бы теме человек ни открыл страницу.

Для сайта мы предлагаем три понятных варианта: «Светлая», «Тёмная», «Как в системе». Последний позволяет учитывать настройку пользователя, а первые два — явно выбрать оформление сайта. Такая модель вариантов есть и в рекомендациях Android для приложений; здесь используем её как удобный ориентир для проектирования веб-интерфейса.

1. Сначала явный выбор посетителя. Если он выбрал светлую тему на сайте, не переключайте её обратно в тёмную вслед за системой.
2. Затем системное предпочтение. В режиме «Как в системе» используйте CSS-медиавыражение prefers-color-scheme: dark или prefers-color-scheme: light, описанное MDN. Значение light соответствует светлой теме или отсутствию явного предпочтения. Медиавыражение не измеряет освещение комнаты и не определяет время суток.
3. Запоминайте настройку, когда это доступно. Например, через localStorage, который позволяет хранить данные между сеансами браузера. Учтите запрет хранения в настройках браузера: переключатель должен работать и без успешного сохранения.
4. Дайте вернуться к системе. Посетитель должен понимать, какой вариант сейчас активен. В системном режиме проверяйте и изменение системной настройки, пока страница открыта.

Отдельно согласуйте с темой стандартные поля форм и полосы прокрутки. В CSS для этого есть color-scheme. Это свойство сообщает браузеру поддерживаемую цветовую схему; цвета авторских блоков нужно задать отдельно. При ручном выборе светлой темы стандартные элементы тоже должны соответствовать ей.

Контраст текста в обеих темах

Светлая тема не гарантирует читаемость, как и тёмная. В пояснении W3C к критерию 1.4.3 WCAG 2.2 для уровня AA указан минимум контраста обычного текста с фоном — 4,5:1. Для крупного текста — 3:1: от 18 pt обычного начертания или от 14 pt полужирного. Это минимальные ориентиры, а не оценка всей доступности страницы.

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

На нашей схеме текст #666666 на фоне #121212 даёт примерно 3,26:1 — для обычного текста этого недостаточно. Светлый #f7f8f4 на том же фоне даёт примерно 17,56:1. Значения рассчитаны по формуле относительной яркости W3C; это примеры палитр, а не универсальное правило выбирать именно эти оттенки.

Фирменный цвет тоже проверяйте в каждой роли. Например, зелёный #15ce86 на светлом #f7f8f4 даёт около 1,93:1 — его не стоит брать для обычного текста в такой паре. Зато тёмный текст #202220 на зелёной заливке даёт около 7,78:1. Один акцент можно сохранить в обеих темах, изменив способ его применения.

У значимых иконок и визуальных признаков элементов управления есть отдельный критерий 1.4.11: минимум 3:1 с соседним цветом, с указанными в стандарте исключениями. Это не требование ко всем декоративным линиям. Проверьте, можно ли различить нужные элементы и состояния; подпись внутри кнопки оценивайте по правилам для текста.

Картинки и логотипы в тёмной теме

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

• Логотип. Подготовьте разрешённый фирменным стилем вариант для тёмной поверхности — например, светлый знак. Если менять знак нельзя, попробуйте подходящую светлую подложку. Исключение для текста логотипов в WCAG 1.4.3 не мешает поставить практическую задачу: посетитель должен узнавать бренд.
• Фото продукта. Проверьте край объекта, прозрачность и окружающий фон. Для фотографии на белом можно оставить светлую карточку с аккуратными полями. Не нужно перекрашивать сам продукт ради единой тёмной заливки.
• Схемы и иллюстрации. Подготовьте вариант с подходящими линиями и подписями либо сохраните всю схему на собственной контрастной подложке. Проверьте подписи так же, как остальной текст.
• Иконки. Согласуйте их цвета с палитрой темы и проверьте значимые состояния. Для условного знака на схеме ниже мы меняем тёмный вариант на светлый, сохраняя форму.

В документации MDN для picture есть пример выбора файла для светлой и тёмной тем через prefers-color-scheme. Но если человек вручную сменил тему только на сайте, системное предпочтение может остаться прежним. Подмена изображений должна учитывать тот же выбор, что и фон страницы. Проверьте эту связку отдельно, чтобы светлый знак случайно не оказался на светлом фоне.

Что проверить перед запуском

Мы бы принимали обе темы на одинаковом наборе страниц: главная, список, подробное описание и экран с интерактивными элементами. Сравните их на компьютере и телефоне с настоящим контентом. Красивого первого экрана для этого недостаточно.

• Основной текст, подписи, ссылки и надписи на кнопках проходят проверку контраста на своём фоне.
• Переключатель доступен с клавиатуры, его фокус виден, текущий выбор понятен. Требования к клавиатуре и фокусу описаны в WCAG 2.2, критерии 2.1.1 и 2.4.7.
• Ручной выбор сохраняется при переходах, когда хранение доступно; режим «Как в системе» снова следует настройке системы.
• При обновлении страницы оформление применяется без заметного показа другой темы. Попросите разработчика проверить это и при медленной загрузке.
• Логотип, изображения с прозрачностью, схемы, меню и всплывающие окна читаются в обоих вариантах.
• При наведении, фокусе и выборе элемента понятны подписи и состояние. На странице нет фрагментов, которым забыли назначить палитру.

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

Обязательно ли делать две темы для корпоративного сайта?

Мы бы решали это по задачам проекта. Можно выбрать одно оформление и тщательно проверить его, а можно заложить два варианта и настройку «Как в системе». Во втором случае в план работ нужно включить проверку обеих палитр, изображений и элементов управления.

Тёмная тема должна быть полностью чёрной?

Нет. Для фона можно подобрать графитовый или другой тёмный оттенок. Пример #121212 из Material Design 2 объясняет работу с поверхностями и тенями; он не обязывает все сайты использовать одну палитру. Контраст текста проверяют с выбранным фоном.

Чередование блоков заменяет переключатель темы?

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

Почему сайт не меняет тему вслед за телефоном?

Проверьте настройки самого сайта: возможно, там явно выбрана светлая или тёмная тема. В предлагаемой нами логике системная настройка действует в режиме «Как в системе». Разработчику нужно проверить и prefers-color-scheme, и приоритет сохранённого выбора.

Повысит ли тёмная версия продажи?

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

Источники

• Определение предпочтения светлой или тёмной темы — MDN Web Docs, prefers-color-scheme, живая документация, проверена 26.10.2026.
• Цветовая схема стандартных элементов браузера — MDN Web Docs, color-scheme, редакция 21.07.2026.
• Хранение настройки между сеансами — MDN Web Docs, Window: localStorage property, редакция 12.10.2026.
• Смена изображений для двух тем — MDN Web Docs, picture: The media attribute, проверено 26.10.2026.
• Контраст текста — W3C WAI, Understanding SC 1.4.3: Contrast (Minimum); стандарт — W3C, Web Content Accessibility Guidelines (WCAG) 2.2, Recommendation, 12 December 2024. В стандарте также приведены формула контраста, критерии для графики, клавиатуры, фокуса и перетаскивания.
• Принцип тёмно-серых поверхностей — Google, Material Design 2: Dark theme, прежняя версия системы, более не поддерживается; проверено 26.10.2026.
• Настройка темы и использование при слабом освещении — Android Developers, Implement dark theme, обновлено 23.10.2026. Руководство относится к приложениям Android.