План: светлая и тёмная тема

СТАТУС: ВЫПОЛНЕН 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. Смоук

Переключение мгновенное, без перезагрузки; выбор переживает её же.
При системной тёмной теме первый визит открывается сразу тёмным.
Нативные контролы выглядят тёмными.
Шахматка различима, легенды и бейджи читаемы.
Баннер ошибки и пипетка заметны на тёмных панелях.

6. Критерий готовности

Grep: ни одного цвета вне токенов в компонентах и маршрутах.

7. Не делаем

Три позиции в переключателе; пользовательские цветовые схемы; автосмену по времени суток; отдельную тему для превью изображений.

3.8 KiB Raw Blame History