62 lines
3.8 KiB
Markdown
62 lines
3.8 KiB
Markdown
# План: светлая и тёмная тема
|
|
|
|
> **СТАТУС: ВЫПОЛНЕН 25.08.2026.**
|
|
|
|
## 1. Что получается
|
|
|
|
Переключатель light/dark в шапке рядом с языковым. Выбор в localStorage
|
|
(`theme`), первый визит — по `prefers-color-scheme`. Тёмная палитра —
|
|
переопределение токенов селектором `[data-theme='dark']`; компоненты не
|
|
правятся.
|
|
|
|
## 2. Решения
|
|
|
|
- Два состояния, без «авто»: ключ хранит только явный выбор, отсутствие ключа =
|
|
системная тема.
|
|
- Анти-вспышка: инлайн-скрипт в `app.html` до гидрации ставит `data-theme` из
|
|
localStorage или `matchMedia`; пререндеренная разметка остаётся светлой.
|
|
- `color-scheme: dark` на корне — нативные контролы (input[type=color], range,
|
|
select, скроллбары) темнеют без правок.
|
|
- Модуль `theme.svelte.ts` по образцу locale: состояние, персист, применение
|
|
атрибута. Стартовую установку делает скрипт из `app.html`, модуль
|
|
синхронизирует runes-состояние после гидрации.
|
|
|
|
## 3. Палитра
|
|
|
|
- Переопределяем: `--bg`, `--surface`, `--border`, `--text`, `--text-muted`.
|
|
- Акцент `#2563eb` не меняется; `--accent-hover` — светлее для тёмного фона.
|
|
- `--danger` осветлить для читаемости.
|
|
- `--check-a`/`--check-b` шахматки — приглушённые серые: паттерн прозрачности
|
|
остаётся узнаваемым, но не слепит.
|
|
- `--shadow-card` — почти чёрная с низкой альфой вместо синей.
|
|
- Все `color-mix(… var(--surface))` пересчитаются сами — проверить визуально
|
|
легенды, recalc-бейдж, drag-оверлеи.
|
|
|
|
## 4. Этапы и проверки
|
|
|
|
Каждый этап заканчивается зелёными test/check/build и ревью.
|
|
|
|
- **A. Инфраструктура** — `theme.svelte.ts`, скрипт в `app.html`, переключатель
|
|
в шапке, черновая тёмная палитра. Тесты: персист выбора, игнор мусора в
|
|
localStorage, применение атрибута (стаб document).
|
|
- **B. Палитра** — выверка значений: герой, каталог, страница инструмента,
|
|
цепочка, баннер ошибки, маска, текстовые инструменты; фокус-ринги и hover; обе
|
|
локали.
|
|
|
|
## 5. Смоук
|
|
|
|
1. Переключение мгновенное, без перезагрузки; выбор переживает её же.
|
|
2. При системной тёмной теме первый визит открывается сразу тёмным.
|
|
3. Нативные контролы выглядят тёмными.
|
|
4. Шахматка различима, легенды и бейджи читаемы.
|
|
5. Баннер ошибки и пипетка заметны на тёмных панелях.
|
|
|
|
## 6. Критерий готовности
|
|
|
|
Grep: ни одного цвета вне токенов в компонентах и маршрутах.
|
|
|
|
## 7. Не делаем
|
|
|
|
Три позиции в переключателе; пользовательские цветовые схемы; автосмену по
|
|
времени суток; отдельную тему для превью изображений.
|