Тёмная / светлая тема
Кратко
Платформа поддерживает два режима оформления: светлую и тёмную тему. Переключение выполняется через иконку в шапке (луна/солнце). Выбранная тема сохраняется в localStorage и применяется мгновенно без перезагрузки страницы. При первом посещении система учитывает предпочтения операционной системы пользователя.
Кто имеет доступ
| Роль | Переключение темы |
|---|---|
| Администратор | Да |
| Руководитель | Да |
| Оператор | Да |
| Сотрудник клиента | Да |
Переключение темы доступно всем ролям без ограничений.
Где найти
Иконка переключения темы расположена в правой части шапки (header) на всех страницах:
- Светлая тема активна: отображается иконка луны (нажмите для переключения на тёмную).
- Тёмная тема активна: отображается иконка солнца (нажмите для переключения на светлую).
Как работает
Переключение
При нажатии на иконку:
- Тема меняется мгновенно без перезагрузки страницы.
- Все CSS-переменные обновляются одним действием.
- Иконка в шапке меняется на противоположную (луна <-> солнце).
- Выбор сохраняется в localStorage браузера.
CSS Custom Properties
Темизация реализована через CSS custom properties (переменные). При переключении темы меняются значения корневых переменных:
| Переменная | Назначение | Светлая | Тёмная |
|---|---|---|---|
| --bg | Основной фон | Светлый | Тёмный |
| --surface | Фон карточек и панелей | Белый | Тёмно-серый |
| --text | Основной текст | Тёмный | Светлый |
| --accent | Акцентный цвет | Синий | Синий (светлее) |
| и другие | Границы, тени, состояния | ... | ... |
Все компоненты интерфейса используют эти переменные вместо фиксированных цветов, что обеспечивает единообразное переключение темы.
Сохранение выбора
Выбранная тема сохраняется в localStorage браузера:
- Ключ хранения определён в коде приложения.
- При следующем визите тема применяется сразу, без мерцания.
- Настройка привязана к браузеру, а не к аккаунту пользователя.
Определение системных предпочтений
При первом посещении (когда в localStorage нет сохранённой темы):
- Система проверяет CSS media query
prefers-color-scheme.
- Если ОС или браузер настроены на тёмную тему — применяется тёмная тема.
- Если на светлую или предпочтение не задано — применяется светлая тема.
- После первого ручного переключения сохранённый выбор имеет приоритет над системным.
Совместимость
Тема корректно применяется ко всем элементам интерфейса:
- Навигация и шапка.
- Списки заявок и Kanban-доска.
- Чат и детали заявки.
- Формы и модальные окна.
- Аналитические графики и таблицы.
- Виджет (наследует тему портала или имеет собственную настройку).
Производительность
Переключение темы не вызывает:
- Перезагрузку страницы.
- Повторную загрузку данных.
- Перерисовку компонентов (только обновление CSS-переменных).
Смена темы происходит за миллисекунды и не влияет на производительность приложения.
Частые вопросы
Сохраняется ли тема при переходе между страницами?
Да. Тема сохраняется в localStorage и применяется на всех страницах.
Тема привязана к моему аккаунту?
Нет. Тема привязана к браузеру. Если вы зайдёте с другого устройства, придётся выбрать тему заново.
Почему тема не совпадает с системной после первого переключения?
После ручного выбора темы сохранённое значение имеет приоритет над системными предпочтениями.
Есть ли автоматическое переключение по времени суток?
Нет. Переключение только вручную или на основе системных настроек при первом визите.
Видят ли другие пользователи мою тему?
Нет. Тема — локальная настройка каждого пользователя.
Корректно ли отображаются графики аналитики в тёмной теме?
Да. Графики и диаграммы адаптируются под выбранную тему.
Связанные статьи
- Выбор языка — настройка языка интерфейса.
- Клиентский портал (обзор) — интерфейс клиентского портала.
- Брендирование — настройка визуального стиля платформы.