Как включить тёмную тему в Codex: светлый и тёмный режим без сюрпризов

Самый частый вопрос в поддержке магазина тем — не «какие цвета красивее», а «почему моя тема не переключается сама, когда я меняю тему на компьютере». Ответ упирается в то, как устроены режимы в Codex: есть принудительно светлый, принудительно тёмный и автоматический. Автоматический — это не магия, а CSS-медиазапрос prefers-color-scheme. Разберём по частям.

Зачем одной теме два набора цветов

Утром хочется светлый рабочий стол. Ночью тот же экран будто кричит. Это не вопрос вкуса, а общий ритм для большинства пользователей редактора. Тема Codex с полноценной поддержкой двух режимов даёт два рабочих состояния, и не нужно лезть в настройки каждый раз, когда меняется освещение.

Как устроена тема с двумя режимами

Внутри файла темы лежат две таблицы цветов: light и dark. Они независимо управляют фоном, текстом, границами и подсветкой синтаксиса.

Если в настройках кастомизации видишь две палитры — не пугайся. Обе работают на благо.

Как тема следует за системой

У кодексовских тем три режима: принудительно светлый, принудительно тёмный и авто. Авто опирается на CSS-медиазапрос prefers-color-scheme. Операционная система светлая — тема светлая; переключил ОС на тёмную — тема поехала следом. Без единого клика. Весь фокус в том, чтобы тема объявила этот запрос. Тогда редактор подхватывает системную схему.

@media (prefers-color-scheme: dark) { :root { /* переопределение тёмных переменных */ } }

Какие встроенные темы поддерживают оба режима по умолчанию

Из коробки полную пару светлой и тёмной схемы дают пять тем:

• Codex default
• Graphite
• Dusk
• Ink Paper
• Forest

Выбираешь «авто» в настройках — и эффект виден сразу. Для остальных стилей загляни в галерею, там темы отсортированы по режиму.

Почему при кастомизации нужно заполнять обе палитры

Частая ошибка — задать одну палитру и забыть про вторую. Переключаешь режим — и интерфейс превращается то ли в белое пятно, то ли в чёрную дыру. Фреймворк темы подменяет переменные между двумя схемами, а всё, что не определено, падает в значение по умолчанию. Контраст разваливается. Заполнять обе палитры нужно не для красоты, а чтобы переключение никогда не ломалось.

Как избежать резкой вспышки при переключении

Переход со светлого на тёмный за один кадр — это больно глазам. Мне помогает такой подход:

• Не переключай мгновенно — дай анимации 150–300 миллисекунд.
• Не используй чистый чёрный в тёмной теме. Глубокий сине-серый сильно приятнее для глаз.
• Держи один и тот же оттенок для цветов подсветки в обоих режимах, меняй только светлоту.
• Сразу после переключения проверь синтаксис. Убедись, что текст не сливается с фоном.

Частые вопросы

Как заставить тему Codex следовать за системой? Выбери «авто» в настройках темы. Тема прочитает prefers-color-scheme и подстроится под ОС.

Текст не читается в тёмной теме на моей кастомной теме. Скорее всего, ты заполнил только светлые переменные. Открой гайд по кастомизации и добавь тёмный набор.

Все ли встроенные темы поддерживают оба режима? Не все. Пять перечисленных выше — да, у остальных режим проверяется в настройках.

Главный вывод: тема с двумя схемами — это не прихоть, а рабочий инструмент. Авторежим избавляет от ручного переключения, но только если обе палитры в порядке. Проверь, какие переменные у тебя заполнены, и настрой переход под себя.