# Managed by IssueSpec. Hand edits are welcome; keep the schema valid.
id: 20
title: Add more UI themes
state: open
author:
  name: k33g
  email: ph.charriere@gmail.com
createdAt: 2026-09-18T00:00:00.000Z
updatedAt: 2026-09-18T00:00:00.000Z
labels:
  - feature
  - enhancement
  - ui
  - theming
body: |
  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
  ```
  themes/
    ├── dracula.json
    ├── solarized-light.json
    ├── nord.json
    └── custom/
        └── user-theme.json
  ```

  ### Theme Definition Format
  ```json
  {
    "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",
      ...
    }
  }
  ```

  ### 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