voidea/docs/backlog/ui-themes-note.md

UI Themes - VoIdea

Дата: 2026-05-10 Статус: Backlog (часть WebUI)

---

Обзор

Три темы интерфейса: system (auto), dark, light.

---

Структура

Design Tokens

{
  "themes": ["system", "dark", "light"],
  "colors": {
    "background": {
      "system": "auto",
      "dark": "#0F172A",
      "light": "#FFFFFF"
    },
    "text": {
      "primary": {
        "system": "auto",
        "dark": "#F8FAFC",
        "light": "#0F172A"
      }
    }
  }
}

---

Реализация

CSS Variables

/* Тема применяется через data-theme атрибут */
[data-theme="dark"] {
  --color-background: #0F172A;
  --color-text: #F8FAFC;
}

[data-theme="light"] {
  --color-background: #FFFFFF;
  --color-text: #0F172A;
}

[data-theme="system"] {
  /* Читается из prefers-color-scheme */
}

---

Структура хранения

База данных

CREATE TABLE user_settings (
    user_id UUID PRIMARY KEY REFERENCES users(id),
    theme VARCHAR(10) DEFAULT 'system',
    updated_at TIMESTAMP DEFAULT NOW()
);

localStorage (PWA offline)

localStorage.setItem('voidea_theme', 'dark');

---

Синхронизация

1. При входе → загрузить тему из БД
2. При изменении → обновить БД и localStorage
3. При оффлайн → использовать localStorage
4. При восстановлении → sync БД → localStorage

---

Определение system темы

// CSS media query
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --color-background: #0F172A;
    --color-text: #F8FAFC;
  }
}

// JavaScript detection
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

---

UI настройки

Страница настроек

├── Настройки
│   ├── Внешний вид
│   │   ├── Тема
│   │   │   ├── 🌓 System (автоматически)
│   │   │   ├── 🌙 Dark
│   │   │   └── ☀️ Light

---

Поддержка платформ

Web (PWA)

• CSS Variables
• media query prefers-color-scheme
• Service Worker для offline

React Native (future)

• React Native Appearance API
• useColorScheme() hook

iOS (future)

• SwiftUI ColorScheme
• Адаптация из tokens.json

Android (future)

• Material Design color schemes
• Адаптация из tokens.json

---

Генерация стилей

# Из tokens.json
python -m generators css --themes dark,light

Генерирует app/design-tokens/css/themes.css

---

TODO

• CSS Variables для всех тем
• JavaScript detection для system
• Синхронизация БД ↔ localStorage
• UI переключатель
• Генерация из tokens.json
• Тесты (переключение тем)
• Документация

---

Создано: 2026-05-10 Часть WebUI (Block 4) и Design System