nandi/ori · 0020-add-more-ui-themes.yaml

nandi/oripublic⑂ Fork 0

⑂ b6cd929ab1425a4ef6073ea9c189917cca02cf3c

0020-add-more-ui-themes.yaml · 217 lines · 6.1 KBYAML    Blame HistoryRaw
   1# Managed by IssueSpec. Hand edits are welcome; keep the schema valid.
3title: Add more UI themes
4state: open
name: k33g
email: ph.charriere@gmail.com
8createdAt: 2026-09-18T00:00:00.000Z
9updatedAt: 2026-09-18T00:00:00.000Z
- feature
- enhancement
- theming
Expand the current light/dark theme system to support multiple color themes and color schemes.
## Current State
Based on ticket #0013, Ori currently has:
- Light theme
- Dark theme
- Theme toggle functionality
## Proposed Themes
### Popular Editor Themes
- **Dracula** - Dark purple-based theme (very popular)
- **Solarized Light** - Warm beige-based light theme
- **Solarized Dark** - Dark teal-based theme
- **Monokai** - Dark theme with vibrant colors
- **Nord** - Cool blue/gray theme
- **One Dark** - Atom's dark theme
- **One Light** - Atom's light theme
- **GitHub Light** - GitHub's light theme
- **GitHub Dark** - GitHub's dark theme
- **Gruvbox** - Warm retro groove colors
- **Material Theme** - Google Material Design inspired
- **Night Owl** - Dark theme optimized for night coding
### VS Code Compatible
- Import popular VS Code themes
- Support VS Code theme JSON format
- Allow users to load custom .vsix themes
### High Contrast Options
- High Contrast Light (accessibility)
- High Contrast Dark (accessibility)
- WCAG AAA compliant color combinations
### Colorblind-Friendly
- Deuteranopia (red-green colorblind) friendly
- Protanopia friendly
- Tritanopia (blue-yellow colorblind) friendly
## Requirements
### Theme Management
- Theme selector in settings/preferences
- Preview themes before applying
- Persist selected theme across sessions
- Quick theme switcher (dropdown or command palette)
- Theme applies to entire UI (panels, editor, terminal)
### Theme Components
Each theme should define:
- Background colors (primary, secondary, tertiary)
- Foreground/text colors
- Syntax highlighting colors (keywords, strings, comments, etc.)
- UI element colors (borders, dividers, shadows)
- Status colors (info, success, warning, error)
- Selection/highlight colors
- Terminal colors (16-color palette)
### Monaco Editor Integration
- Themes must work with Monaco editor
- Support for semantic highlighting
- Consistent colors between UI and code editor
- Import Monaco/VS Code theme definitions
## Implementation Considerations
### Frontend Architecture
- CSS custom properties (variables) for easy theme switching
- Theme configuration in JSON/JavaScript
- Dynamic CSS injection or class-based switching
- Tailwind CSS theme extension (if using Tailwind)
### Theme File Structure
91
  ├── dracula.json
  ├── solarized-light.json
  ├── nord.json
  └── custom/
      └── user-theme.json
### Theme Definition Format
100
  "name": "Dracula",
  "type": "dark",
  "colors": {
    "background": "#282a36",
    "foreground": "#f8f8f2",
    "primary": "#bd93f9",
    "secondary": "#ff79c6",
    "accent": "#50fa7b",
    "border": "#44475a",
    "selection": "#44475a",
    "error": "#ff5555",
    "warning": "#ffb86c",
    "success": "#50fa7b",
    "info": "#8be9fd"
  "syntax": {
    "keyword": "#ff79c6",
    "string": "#f1fa8c",
    "comment": "#6272a4",
    "function": "#50fa7b",
    "variable": "#f8f8f2",
    "number": "#bd93f9",
    "operator": "#ff79c6"
  "terminal": {
    "black": "#21222c",
    "red": "#ff5555",
    "green": "#50fa7b",
130
### Custom Theme Support
- Allow users to upload custom themes
- Theme editor/creator UI (advanced)
- Export current theme as JSON
- Share themes via URL or file
## User Experience
### Theme Switcher UI Options
1. **Dropdown in toolbar** - Quick access, always visible
2. **Settings panel** - More detailed, with preview
3. **Command palette** - `/theme <name>` command
4. **Keyboard shortcut** - Cycle through themes (Cmd+K T)
### Preview Before Apply
- Show theme preview in modal/sidebar
- Split view: current vs. new theme
- Live preview without committing
- Preview on hover (theme gallery)
### Theme Categories
- Group themes: Light, Dark, High Contrast, Colorblind-Friendly
- Filter/search themes by name or characteristics
- Mark favorite themes
- Recently used themes
## Accessibility Considerations
- WCAG 2.1 AA minimum contrast ratios
- AAA compliance for high contrast themes
- Colorblind simulation/testing tools
- Screen reader announcements for theme changes
- Respect system preferences (prefers-color-scheme, prefers-contrast)
## Related Features
- Could integrate with `/btw theme dracula` command
- Auto-switch based on time of day (optional)
- Sync theme with OS system theme
- Per-workspace theme preferences
- Theme marketplace/gallery (future)
## Migration Path
- Existing light/dark themes become "Default Light" and "Default Dark"
- Current theme setting preserved
- Gradual rollout of new themes
- Theme compatibility version checking
## Open Questions
- Should terminal colors be part of theme or separate?
- Support for theme-specific fonts?
- Allow per-file-type theme overrides?
- Should themes affect Monaco editor minimap colors?
- Support for animated theme transitions?
- Should there be a "theme of the day" feature?
- Community theme submissions/repository?
## Technical Challenges
- Ensuring consistent colors across all UI components
- Performance impact of theme switching (CSS recalculation)
- Monaco editor theme format conversion
- Terminal emulator color scheme integration
- Testing all themes for accessibility compliance
- Managing theme asset size (bundle size optimization)
## Priority
Medium - Nice to have for personalization and accessibility
## Related Issues
- #0013 - Themes: light and dark (completed)
## Inspiration
- VS Code theme marketplace
- JetBrains IDE themes
- Zed editor themes
- iTerm2 color schemes
- Hyper terminal themes

🛟 Updated. f5c963a k33g yesterday	1	# Managed by IssueSpec. Hand edits are welcome; keep the schema valid.
	2	id: 20
	3	title: Add more UI themes
	4	state: open
	5	author:
	6	name: k33g
	7	email: ph.charriere@gmail.com
	8	createdAt: 2026-09-18T00:00:00.000Z
	9	updatedAt: 2026-09-18T00:00:00.000Z
	10	labels:
	11	- feature
	12	- enhancement
	13	- ui
	14	- theming
	15	body: \|
	16	Expand the current light/dark theme system to support multiple color themes and color schemes.
	17
	18	## Current State
	19
	20	Based on ticket #0013, Ori currently has:
	21	- Light theme
	22	- Dark theme
	23	- Theme toggle functionality
	24
	25	## Proposed Themes
	26
	27	### Popular Editor Themes
	28	- Dracula - Dark purple-based theme (very popular)
	29	- Solarized Light - Warm beige-based light theme
	30	- Solarized Dark - Dark teal-based theme
	31	- Monokai - Dark theme with vibrant colors
	32	- Nord - Cool blue/gray theme
	33	- One Dark - Atom's dark theme
	34	- One Light - Atom's light theme
	35	- GitHub Light - GitHub's light theme
	36	- GitHub Dark - GitHub's dark theme
	37	- Gruvbox - Warm retro groove colors
	38	- Material Theme - Google Material Design inspired
	39	- Night Owl - Dark theme optimized for night coding
	40
	41	### VS Code Compatible
	42	- Import popular VS Code themes
	43	- Support VS Code theme JSON format
	44	- Allow users to load custom .vsix themes
	45
	46	### High Contrast Options
	47	- High Contrast Light (accessibility)
	48	- High Contrast Dark (accessibility)
	49	- WCAG AAA compliant color combinations
	50
	51	### Colorblind-Friendly
	52	- Deuteranopia (red-green colorblind) friendly
	53	- Protanopia friendly
	54	- Tritanopia (blue-yellow colorblind) friendly
	55
	56	## Requirements
	57
	58	### Theme Management
	59	- Theme selector in settings/preferences
	60	- Preview themes before applying
	61	- Persist selected theme across sessions
	62	- Quick theme switcher (dropdown or command palette)
	63	- Theme applies to entire UI (panels, editor, terminal)
	64
65	### Theme Components
66	Each theme should define:
67	- Background colors (primary, secondary, tertiary)
68	- Foreground/text colors
69	- Syntax highlighting colors (keywords, strings, comments, etc.)
70	- UI element colors (borders, dividers, shadows)
71	- Status colors (info, success, warning, error)
72	- Selection/highlight colors
73	- Terminal colors (16-color palette)
74
75	### Monaco Editor Integration
76	- Themes must work with Monaco editor
77	- Support for semantic highlighting
78	- Consistent colors between UI and code editor
79	- Import Monaco/VS Code theme definitions
80
81	## Implementation Considerations
82
83	### Frontend Architecture
84	- CSS custom properties (variables) for easy theme switching
85	- Theme configuration in JSON/JavaScript
86	- Dynamic CSS injection or class-based switching
87	- Tailwind CSS theme extension (if using Tailwind)
88
89	### Theme File Structure
90	```
91	themes/
92	├── dracula.json
93	├── solarized-light.json
94	├── nord.json
95	└── custom/
96	└── user-theme.json
97	```
98
99	### Theme Definition Format
100	```json
101	{
102	"name": "Dracula",
103	"type": "dark",
104	"colors": {
105	"background": "#282a36",
106	"foreground": "#f8f8f2",
107	"primary": "#bd93f9",
108	"secondary": "#ff79c6",
109	"accent": "#50fa7b",
110	"border": "#44475a",
111	"selection": "#44475a",
112	"error": "#ff5555",
113	"warning": "#ffb86c",
114	"success": "#50fa7b",
115	"info": "#8be9fd"
116	},
117	"syntax": {
118	"keyword": "#ff79c6",
119	"string": "#f1fa8c",
120	"comment": "#6272a4",
121	"function": "#50fa7b",
122	"variable": "#f8f8f2",
123	"number": "#bd93f9",
124	"operator": "#ff79c6"
125	},
126	"terminal": {
127	"black": "#21222c",
128	"red": "#ff5555",
129	"green": "#50fa7b",
130	...
131	}
132	}
133	```
134
135	### Custom Theme Support
136	- Allow users to upload custom themes
137	- Theme editor/creator UI (advanced)
138	- Export current theme as JSON
139	- Share themes via URL or file
140
141	## User Experience
142
143	### Theme Switcher UI Options
144	1. Dropdown in toolbar - Quick access, always visible
145	2. Settings panel - More detailed, with preview
146	3. Command palette - `/theme <name>` command
147	4. Keyboard shortcut - Cycle through themes (Cmd+K T)
148
149	### Preview Before Apply
150	- Show theme preview in modal/sidebar
151	- Split view: current vs. new theme
152	- Live preview without committing
153	- Preview on hover (theme gallery)
154
155	### Theme Categories
156	- Group themes: Light, Dark, High Contrast, Colorblind-Friendly
157	- Filter/search themes by name or characteristics
158	- Mark favorite themes
159	- Recently used themes
160
161	## Accessibility Considerations
162
163	- WCAG 2.1 AA minimum contrast ratios
164	- AAA compliance for high contrast themes
165	- Colorblind simulation/testing tools
166	- Screen reader announcements for theme changes
167	- Respect system preferences (prefers-color-scheme, prefers-contrast)
168
169	## Related Features
170
171	- Could integrate with `/btw theme dracula` command
172	- Auto-switch based on time of day (optional)
173	- Sync theme with OS system theme
174	- Per-workspace theme preferences
175	- Theme marketplace/gallery (future)
176
177	## Migration Path
178
179	- Existing light/dark themes become "Default Light" and "Default Dark"
180	- Current theme setting preserved
181	- Gradual rollout of new themes
182	- Theme compatibility version checking
183
184	## Open Questions
185
186	- Should terminal colors be part of theme or separate?
187	- Support for theme-specific fonts?
188	- Allow per-file-type theme overrides?
189	- Should themes affect Monaco editor minimap colors?
190	- Support for animated theme transitions?
191	- Should there be a "theme of the day" feature?
192	- Community theme submissions/repository?
193
194	## Technical Challenges
195
196	- Ensuring consistent colors across all UI components
197	- Performance impact of theme switching (CSS recalculation)
198	- Monaco editor theme format conversion
199	- Terminal emulator color scheme integration
200	- Testing all themes for accessibility compliance
201	- Managing theme asset size (bundle size optimization)
202
203	## Priority
204
205	Medium - Nice to have for personalization and accessibility
206
207	## Related Issues
208
209	- #0013 - Themes: light and dark (completed)
210
211	## Inspiration
212
213	- VS Code theme marketplace
214	- JetBrains IDE themes
215	- Zed editor themes
216	- iTerm2 color schemes
217	- Hyper terminal themes