/* ========================================================================== theme.css — брендовые токены Whalik в виде CSS custom properties. Палитра построена на Material Design 3 и дословно повторяет значения из файлов приложения Whalik (seed #677278 «Cyan2»): - светлая тема — app/src/main/res/values/colors.xml (material_*) - тёмная тема — app/src/main/res/values-night/colors.xml (material_*) Обе палитры по 34 токена. Синхронность с приложением проверяется тестами `test_theme_light_token_matches_app` и `test_theme_dark_token_matches_app` в site/tests/test_brand_assets.py. МОДЕЛЬ ВЫБОРА ТЕМЫ ------------------ Сайт поддерживает ТРИ состояния: 1. data-theme="light" на — пользователь вручную выбрал Light (через переключатель на сайте). 2. data-theme="dark" на — пользователь вручную выбрал Dark. 3. атрибута data-theme НЕТ — авто-режим: тема следует @media (prefers-color-scheme). Логика ниже устроена так, чтобы все три варианта работали и чтобы отсутствие JavaScript (пользователь отключил JS / скрипт не загрузился) всё равно давало корректный рендер: :root { ... светлая палитра ... color-scheme: light dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { ... тёмная палитра ... } } :root[data-theme="dark"] { ... тёмная палитра ... } :root[data-theme="light"] { ... светлая палитра ... } То есть: - без JS и светлой системной теме → светлая (fallback-путь :root). - без JS и тёмной системной теме → тёмная (через @media). - с JS и выбором Light → светлая всегда (атрибут перекрывает @media). - с JS и выбором Dark → тёмная всегда. - с JS и Auto (нет атрибута) → как без JS (по системе). ПОЧЕМУ НУЖЕН РУЧНОЙ ПЕРЕКЛЮЧАТЕЛЬ --------------------------------- На Chrome для Android медиа-запрос `prefers-color-scheme: dark` следует настройке *системы* Android, а НЕ UI-теме самого Chrome. Если пользователь установил Chrome → Settings → Theme → Light, но Android у него в night-mode, `prefers-color-scheme` всё равно вернёт `dark`. То есть пользователь явно просит светлую тему в Chrome, а медиа-запрос отвечает противоположное. Решение — скриптик `assets/js/theme-toggle.js`, который: а) при загрузке страницы читает localStorage('whalik-site-theme') и выставляет data-theme на ДО рендера (inline