Тёмная тема: проектирование и реализация

Хочу обсудить тёмную тему не как простую замену белого фона на чёрный, а как отдельный режим интерфейса. На практике сложнее всего подобрать спокойные поверхности и текст: чисто чёрный фон часто утомляет, а слишком яркие надписи начинают «светиться». Как вы строите палитру — от базовых цветов или от конкретных компонентов и состояний?

У нас хорошо сработало разделение на уровни: фон страницы, карточки, границы, основной и вторичный текст. Цвета задаём смысловыми переменными вроде `--surface` и `--text-muted`, чтобы компоненты не знали, какой режим сейчас включён. Но с тенями в тёмной теме всё оказалось не так очевидно: иногда проще показать приподнятую поверхность более светлым оттенком, а не пытаться повторить светлый вариант.

Ещё вопрос — как давать пользователю выбор. Поддерживаете системную настройку через `prefers-color-scheme`, добавляете переключатель или оба варианта? Если выбор сохраняется, важно не перетирать его системным режимом при каждом открытии страницы. И отдельно стоит проверить иллюстрации, логотипы, поля ввода, фокус и ошибки: именно там часто всплывают забытые цвета. Поделитесь, как вы тестируете обе темы и какие решения пришлось переделывать после запуска.