Initial commit: VoIdeaAI - voice-first AI idea assistant

2026-05-13 12:51:42 +03:00
commit 688d043dad
421 changed files with 47915 additions and 0 deletions
@@ -0,0 +1,173 @@
+# 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*