Files
rf4-spotter/docs/dark-theme.md
T

2.5 KiB

Тёмная тема: палитра и ограничения

Базовая ревизия выполнена 13 сентября 2026 года. Старый CSS содержит много жёстких цветов, а исторический --deep используется одновременно как фирменный тёмный фон и как текст на светлых карточках. Поэтому менять его значение для dark mode нельзя: роли разделяются постепенно без визуальной инверсии бренда.

Семантические роли

  • --canvas — фон страницы;
  • --surface-elevated, --surface-raised, --surface-control — карточки, hover и поля;
  • --text-primary, --text-secondary, --text-tertiary, --text-on-dark — иерархия текста;
  • --border-strong, --border-subtle, --shadow-color — разделители и глубина;
  • существующие status/source-токены сохраняют смысл, но получают контрастные dark-значения там, где используются как текст.

По умолчанию сайт следует prefers-color-scheme через CSS. Переключатель в header позволяет явно выбрать системную, светлую или тёмную тему; выбранное значение хранится в allowlist-cookie rf4-theme (SameSite=Lax, год, Secure на HTTPS). Astro читает cookie на сервере и сразу выставляет data-theme="light|dark"; для системного режима атрибут отсутствует. Client script собирается Astro во внешний asset, поэтому inline-код, localStorage и ослабление CSP не требуются.

Дальнейшая миграция

Файл theme.css временно содержит точечные dark overrides для основных публичных и административных поверхностей. На этапе D05 жёсткие цвета последовательно заменяются семантическими токенами в исходных component styles; source/status различия сохраняют текст или форму и никогда не полагаются только на оттенок.