Тёмная / светлая тема

Кратко

Платформа поддерживает два режима оформления: светлую и тёмную тему. Переключение выполняется через иконку в шапке (луна/солнце). Выбранная тема сохраняется в localStorage и применяется мгновенно без перезагрузки страницы. При первом посещении система учитывает предпочтения операционной системы пользователя.

Кто имеет доступ

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

Где найти

Кнопка переключения темы расположена в правой части шапки (header); иконка на ней показывает текущую тему:

• Светлая тема активна: отображается иконка солнца (нажмите для переключения на тёмную).
• Тёмная тема активна: отображается иконка луны (нажмите для переключения на светлую).

Ту же смену темы выполняет пункт Переключить тему в меню профиля (аватар в шапке). На узком экране кнопка в шапке скрыта — переключатель находится внизу мобильного меню.

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

Как работает

Переключение

При нажатии на иконку:

1. Тема меняется мгновенно без перезагрузки страницы.
2. Все CSS-переменные обновляются одним действием.
3. Иконка в шапке меняется в соответствии с новой темой (солнце <-> луна).
4. Выбор сохраняется в localStorage браузера.

CSS Custom Properties

Темизация реализована через CSS custom properties (переменные). При переключении темы меняются значения корневых переменных:

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

Сохранение выбора

Выбранная тема сохраняется в localStorage браузера:

• Ключ хранения — tp-support-theme, значения light / dark.
• При следующем визите тема применяется сразу, без мерцания.
• Настройка привязана к браузеру, а не к аккаунту пользователя.

Определение системных предпочтений

При первом посещении (когда в localStorage нет сохранённой темы):

1. Система проверяет CSS media query prefers-color-scheme.
2. Если ОС или браузер настроены на тёмную тему — применяется тёмная тема.
3. Если на светлую или предпочтение не задано — применяется светлая тема.
4. Внутри Битрикс24 дополнительно учитывается фон портала: если портал открыт в тёмной теме, приложение тоже включает тёмную.
5. После первого ручного переключения сохранённый выбор имеет приоритет над системным.

Совместимость

Тема корректно применяется ко всем элементам интерфейса:

• Навигация и шапка.
• Списки заявок и Kanban-доска.
• Чат и детали заявки.
• Формы и модальные окна.
• Аналитические графики и таблицы.

Управление с клавиатуры при этом не меняется — раскладка горячих клавиш одинакова в обеих темах.

Производительность

Переключение темы не вызывает:

• Перезагрузку страницы.
• Повторную загрузку данных.
• Перерисовку компонентов (только обновление CSS-переменных).

Смена темы происходит за миллисекунды и не влияет на производительность приложения.

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

Сохраняется ли тема при переходе между страницами?

Да. Тема сохраняется в localStorage и применяется на всех страницах.

Тема привязана к моему аккаунту?

Нет. Тема привязана к браузеру. Если вы зайдёте с другого устройства, придётся выбрать тему заново.

Почему тема не совпадает с системной после первого переключения?

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

Есть ли автоматическое переключение по времени суток?

Нет. Переключение только вручную или на основе системных настроек при первом визите.

Видят ли другие пользователи мою тему?

Нет. Тема — локальная настройка каждого пользователя.

Корректно ли отображаются графики аналитики в тёмной теме?

Да. Графики и диаграммы адаптируются под выбранную тему.

Где ещё настраивается личный вид интерфейса?

Помимо темы, каждый сотрудник отдельно настраивает себе уведомления — тоже в меню профиля.

Связанные статьи

• Выбор языка — настройка языка интерфейса.
• Клиентский портал (обзор) — интерфейс клиентского портала.
• Брендирование — настройка визуального стиля платформы.