Темы и атмосфера · Документация

Вся палитра построена на CSS-переменных, объявленных в :root и .dark. Это позволяет переключать темы мгновенно, без перерисовки компонентов, и менять оттенки точечно — например, акцент или цвет линий.

#Токены

Минимальный набор переменных, описывающих тему:

css

:root {
  --bg-base: 250 247 242;
  --bg-surface: 255 253 249;
  --ink: 22 22 27;
  --accent: 196 124 68;
  --cool: 92 116 168;
}

.dark {
  --bg-base: 10 11 14;
  --bg-surface: 16 18 23;
  --ink: 236 238 244;
  --accent: 232 175 119;
  --cool: 124 148 196;
}

#Палитра пространства

Каждый wiki-space может переопределять --accent и --cool через _space.json. Светлая и тёмная схемы по-прежнему работают.

json

{
  "palette": {
    "accent": { "light": "82 130 60", "dark": "162 196 120" },
    "cool":   { "light": "120 100 80", "dark": "180 150 120" }
  }
}

#Атмосферные фоны

Премиальное настроение задают три слоя:

Радиальные градиенты с тёплым и холодным акцентом
Тонкая SVG-шумовая текстура поверх
Лёгкий блюр и backdrop-filter на панелях

#Переключение

Тема определяется в три шага: значение из localStorage → системные настройки → dark по умолчанию. Скрипт встраивается в <head> синхронно, чтобы избежать вспышки неправильной темы при загрузке.

Если переключать тему уже после монтирования React, пользователь увидит короткую вспышку светлой темы на тёмном устройстве. Inline-скрипт в <head> читает localStorage и prefers-color-scheme ещё до того, как браузер успеет отрисовать первый кадр.