Тёмная тема
Палитра тёмной темы Nupek и правила переключения между системной настройкой и ручным выбором.
Тёмная тема Nupek - нейтральный тёмно-серый фон, не синий и не чёрный. Она использует тот же набор ролей, что и светлая: текст, интерактив, акцент, поверхности, границы - только со значениями, откалиброванными под тёмный фон.
Палитра
| Токен | HEX | Роль |
|---|---|---|
bg-dark | #17181C | Фон страницы |
surface-dark | #1E2024 | Карточки, панели |
line-dark | #2E3036 | Границы |
text-dark | #EDEFF4 | Текст |
text-dark-muted | #A6ACB8 | Второстепенный текст |
signal-dark | #6FA0D8 | Ссылки, интерактив |
accent-dark | #D9A752 | Тот же акцент, светлее для тёмного фона |
Статусы в тёмной теме используют затемнённый фон и светлый текст того же смысла: positive (#16301F / #7FDDA0), intermediate (#332512 / #F0C978), info (#16233A / #9DBEE8), neutral (#23262C / #9AA0AC).
Переключение
Тема определяется системной настройкой prefers-color-scheme по умолчанию. Переключатель в шапке сайта - иконка солнца или луны - позволяет выбрать тему вручную; выбор сохраняется и получает приоритет над системной настройкой при следующих визитах.
Как это устроено технически
Ручной выбор темы записывается в localStorage и применяется атрибутом data-theme на <html> ещё до отрисовки страницы - это исключает мигание неверной темой при загрузке. Пока пользователь не переключал тему вручную, сайт следует prefers-color-scheme и обновляется вместе с системной настройкой.
Ни один компонент не имеет отдельной «тёмной» версии - Button, Field, Tag, Callout, CodeBlock и Card ссылаются на ролевые переменные (--color-text, --color-surface-1, --color-border, --color-link, --color-accent-1), которые сами переопределяются в тёмной теме. Обновлять компоненты при доработке палитры не требуется.