3.8 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 не требуются.
Цвет browser chrome задаётся двумя theme-color meta-тегами с media query в системном режиме. При явном выборе Astro активирует нужный meta-тег на SSR, а переключатель синхронизирует его без перезагрузки. Manifest использует тёмный фирменный цвет как стабильный fallback для splash screen и установленного PWA.
Растровые материалы
Публичный runtime использует один контентный растр lake-dawn.webp (1774×887, без alpha), OG-изображение и набор PWA/favicon-иконок. Hero-фотография получает отдельный dark-фильтр яркости, насыщенности и контраста, а при печати фильтр отключается. Скриншоты модерации показываются на семантической подложке; прозрачные media-pipeline assets не публикуются до ручного review и поэтому не участвуют в theme-контракте. PWA-иконки проверены по dimensions и channel model: обычные иконки поддерживают alpha, maskable-варианты имеют сплошной фон.
Дальнейшая миграция
Файл theme.css временно содержит точечные dark overrides для основных публичных и административных поверхностей. На этапе D05 жёсткие цвета последовательно заменяются семантическими токенами в исходных component styles; source/status различия сохраняют текст или форму и никогда не полагаются только на оттенок.