Ночной дозор сломался: почему тема не переключается
Вечер. Светлый экран режет глаза
Захотелось полистать дашборды, и вместо комфортного темного интерфейса получаешь удар по сетчатке.
Кажется, что функция темной темы существует в каком-то параллельном измерении, где всегда день. Разбираемся, почему переключатели не работают и как это чинить.
Цена ошибки
Проблема не только в эстетике. Светлый фон в 21:00 — это не просто неудобно, это:
- Нарушение циркадных ритмов. Яркий синий спектр подавляет выработку мелатонина, вы пытаетесь заснуть, а мозг думает, что наступил полдень.
- Снижение концентрации. Приходится щуриться, чтобы разглядеть цифры, вместо просмотра информации на экране вы боретесь с бликами.
- Баги в логике. Самое обидное, когда тема должна переключаться автоматически, но этого не происходит.
Почему это ломается: причины и примеры
Здесь важно развести два разных сбоя.
Первый: тема вообще не применилась.
Второй: тёмная тема есть, но сделана так, что пользоваться ею всё равно тяжело.
Тема не переключается: дашборд не узнал, что уже ночь
1. Системная тема ОС и prefers-color-scheme
Браузер умеет сообщать сайту, что пользователь предпочитает тёмную тему. Это стандартный механизм, он работает во всех современных браузерах с 2020 года. Однако если дашборд к нему не подключён, он просто не узнает о настройках системы и останется светлым.
Если фон "зашит" жёстко, например, всегда белый, он таким и будет, а если добавить условие для тёмной темы, браузер сам подставит нужный цвет, когда система переключится.
По данным Can I Use, поддержка prefers-color-scheme сейчас практически повсеместная: Chrome с версии 76, Safari с 12.1, Firefox с 67Opera с 63, Samsung Internet с 14.2 и пр. С января 2020 года эта функция доступна во всех основных браузерах, и нет никаких технических причин её игнорировать.
2. Тема платформы BI — это не то же самое, что тема ОС
В корпоративных BI-инструментах (Power BI, Tableau, Looker, Qlik, Metabase, Apache Superset, Grafana и др.) тёмная тема часто живёт отдельно от системы: тема отчёта или воркбука, настройки workspace организации, переключатель в самом продукте. ОС уже ночная, а отчёт всё ещё со светлой темой по умолчанию — типичная картина, и лечится она не одним CSS-медиазапросом.
Поэтому, когда "ночной дозор сломался", сначала уточните, какой именно переключатель вы ждали: системный или платформенный. Путаница между ними — частая причина ложных ожиданий.
3. Графики на canvas не подхватывают смену темы
Если график нарисован на canvas (Chart.js, D3, Apache ECharts, Plotly.js, Highcharts и др. библиотеки ), он не увидит смену темы автоматически. CSS-переменные внутрь canvas не проникают. Цвета линий, осей и подписей задаются в конфигурации графика в момент отрисовки, и если не обновить конфигурацию при смене темы, график останется в старой схеме
Причина в том, как график узнаёт о теме, он считывает её один раз, при первой отрисовке, и больше не проверяет. Визуально это выглядит так: интерфейс вокруг потемнел, а график остался светлым или наоборот, заметить можно только в момент переключения.
Пример 1. Contributors GitLab. На странице contributors.gitlab.com/dashboard график сохраняет цвета старой темы после переключения светлого и тёмного режима.
Пример 2. Grafana, панель Gauge. На странице issue в GitHub (# 91155) описан баг, когда при переключении темы через Ctrl+K панель Gauge не перерисовывается — цвета остаются от предыдущей темы.
Чтобы увидеть корректные цвета, приходится жать F5.
4. Проблема белой вспышки.
Даже если дашборд поддерживает темную тему, есть еще одна ловушка — flash of white background. Когда страница загружается, браузер сначала рисует белый фон по умолчанию, и только потом применяет CSS. В темной комнате это выглядит как вспышка.
Белая вспышка при загрузке — это общий баг, который встречается везде, где есть тёмная тема. Не только в браузерах: та же проблема есть в мобильных приложениях, в настольных программах, в корпоративных системах вроде Confluence. Везде, где страница или экран сначала рисуются светлыми, а тёмную тему применяют уже после загрузки.
Именно эту проблему решают расширения вроде Dark Flash для Chrome или Dark Background Anti-Flash для Firefox. Они накладывают тёмный слой поверх страницы, пока она грузится, и вспышки не видно, но это скорее скорая помощь для пользователя. Правильное решение на стороне разработчика: прописать тёмный фон в самом начале страницы, до загрузки стилей.
Как решать перечисленные проблемы
Если вы устали жмуриться по вечерам, вот что стоит сделать или попросить вашу команду:
1. Для веб-дашбордов — подключить prefers-color-scheme. Без этого медиазапроса браузер не сообщит интерфейсу, что система ушла в тёмный режим.
2. Для BI-платформ — проверить тему отчёта/воркбука и настройки workspace: системная ночь не всегда тянет за собой тему отчёта.
3. Использовать переменные для цветов. Это позволит переключить тему одним действием, а не править каждый элемент вручную.
4. Убрать "белую вспышку" при загрузке. Задать тёмный фон в самом начале страницы.
5. Тестировать графики при смене темы. Цвета в конфиге нужно обновлять явно, иначе график останется от старой темы.
6. Дать явный переключатель. Не полагайтесь только на систему, если она не сообщит о смене темы или платформа её игнорирует, у пользователя должен быть очевидный ручной способ.
А теперь про дизайн
Тема переключилась, но... тёмный режим "есть", а глаза всё равно устают
Отдельный класс проблем: автопереключение сработало или тему включили вручную, но палитра собрана так, что ночью пользоваться дашбордом всё равно тяжело.
Material Design уже все придумал
Google в Material Design дает четкие рекомендации для темных тем. Главный принцип: не используйте чистый черный # 000000, вместо этого — темно-серый # 121212. Почему?
- Чистый черный создает слишком резкий контраст с белым текстом, что увеличивает напряжение глаз.
- На OLED-экранах черный экономит батарею, но темно-серый все еще достаточно темен для этой цели.
- Тени и уровни elevation (глубина интерфейса) видны на сером фоне, но исчезают на чистом черном.
Material Design также требует контраст не менее 15.8:1 между белым текстом и фоном, чтобы даже на самом светлом уровне elevation текст проходил WCAG AA.
В темных темах интерфейса преимущественно используются темные поверхности с минимальным количеством цветовых акцентов. Они излучают мало света, сохраняя при этом высокий уровень удобства использования.
1. Фон (наложение поверхности с высотой 0 dp)
2. Плашка (с наложением поверхности с высотой 1 dp)
3. Основной цвет
4. Дополнительный цвет
5. Цвет шрифта на основном фоне
6. Цвет и кегль на плашке
7. Шрифт на основном цвете
8. Шрифт на дополнительном цвете
По ссылке изложены ключевые принципы дизайна с тёмной темой.
Что ещё проверить на дашборде
Даже при правильном # 121212 легко сломать ночной режим "локально": светлая подложка графика в тёмной оболочке, оси и сетка, которые пропадают или наоборот слепят, тултипы со светлым дефолтом, виджеты из разных библиотек в одной теме, embed отчёта, который игнорирует тему портала. Для BI-щика это как раз зона приёмки: не только тема включена, а все панели в одной схеме.
Что необходимо учитывать в дизайне
1. Не использовать чистый чёрный. Рекомендация Material Design использовать тёмно-серый, мягче для глаз и оставляет видимыми уровни "глубины" интерфейса.
2. Проверять контраст. Тёмная тема — не исключение: цифры, подписи осей и легенды должны читаться без угадывания.
3. Свести акценты к минимуму и держать единую шкалу поверхностей фон → плашка → акцент.
4. Прогнать типичные виджеты дашборда в тёмной теме: KPI, таблицы, карты, gauge, тултипы.
Итак, выводы
Дашборд — это инструмент, который должен помогать. Если тёмная тема в нём не переключается, пользователь вечером получает удар по глазам. Если тема переключилась, но палитра и графики собраны без учёта основных принципов дизайна, то эффект тот же.
Два разных сбоя: "не узнали / не применили тему" и "применили, но криво". Для аналитика важны оба, т.к. чинятся по-разному. В первом случае сначала ответьте: ОС или платформа BI, потому что это разные механизмы.
Технически проблема решается, когда дашборд может распознать информацию о смене темы и применить её ко всем элементам сразу, включая графики, и когда тёмная палитра читаема.
Проверьте свой дашборд сегодня. Ночной режим существует не просто так.
Подписывайтесь на мой телеграмм канал