# UI Themes - VoIdea

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

---

## Обзор

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

---

## Структура

### Design Tokens

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

---

## Реализация

### CSS Variables

```css
/* Тема применяется через 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 */
}
```

---

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

### База данных

```sql
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)

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

---

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

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

---

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

```javascript
// 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

---

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

```bash
# Из 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*