173 lines
3.1 KiB
Markdown
173 lines
3.1 KiB
Markdown
# 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* |