---
name: theme
description: Switch and customize UI themes (light/dark/custom)
argument-hint: "[light|dark|--list|--create|--edit]"
---

# Theme Manager

Manage UI themes for the trading platform.

## Usage

- `/theme` - Show current theme
- `/theme light` - Switch to light theme
- `/theme dark` - Switch to dark theme
- `/theme --list` - List all available themes
- `/theme --create trading-dark` - Create new theme
- `/theme --edit dark` - Edit existing theme
- `/theme --export` - Export theme as JSON

## Theme System

- **Framework**: Tailwind CSS + CSS variables
- **Provider**: next-themes (ThemeProvider)
- **Storage**: localStorage
- **Components**: Radix UI primitives

## Theme Files

```
services/ui/
├── src/
│   ├── contexts/ThemeContext.tsx
│   ├── components/theme-provider.tsx
│   ├── components/mode-toggle.tsx
│   └── styles/
│       ├── globals.css        # CSS variables
│       └── themes/
│           ├── light.css
│           ├── dark.css
│           └── trading-dark.css
└── tailwind.config.js
```

## Instructions

When this skill is invoked:

1. Parse arguments:
   - No args: Show current theme info
   - Theme name: Switch to that theme
   - `--list`: List all available themes
   - `--create <name>`: Create new theme
   - `--edit <name>`: Edit theme variables
   - `--export`: Export current theme

2. Show current theme:
   ```
   Current Theme
   ═══════════════════════════════════════════════════════════

   Active: dark
   System preference: dark

   Colors:
   ─────────────────────────────────────────────────────────
   --background:     hsl(222.2 84% 4.9%)     ████
   --foreground:     hsl(210 40% 98%)        ████
   --primary:        hsl(217.2 91.2% 59.8%)  ████
   --secondary:      hsl(217.2 32.6% 17.5%)  ████
   --accent:         hsl(217.2 32.6% 17.5%)  ████
   --destructive:    hsl(0 62.8% 30.6%)      ████
   --muted:          hsl(217.2 32.6% 17.5%)  ████

   Chart colors:
   ─────────────────────────────────────────────────────────
   --chart-up:       hsl(142 76% 36%)        ████ (green)
   --chart-down:     hsl(0 84% 60%)          ████ (red)
   --chart-grid:     hsl(217 32% 25%)        ████
   ```

3. For `--list`:
   ```
   Available Themes
   ─────────────────────────────────────────────────────────
   • light         System light theme
   • dark          System dark theme (active)
   • trading-dark  Dark theme optimized for trading
   • bloomberg     Bloomberg terminal style
   ```

4. For `--create`:
   - Create new theme CSS file
   - Copy from base theme
   - Guide through customization
   - Register in theme provider

5. For `--edit`:
   - Open theme CSS variables
   - Show color picker suggestions
   - Preview changes
   - Validate contrast ratios

6. Theme CSS structure:
   ```css
   /* themes/trading-dark.css */
   [data-theme="trading-dark"] {
     --background: 222.2 84% 4.9%;
     --foreground: 210 40% 98%;
     --card: 222.2 84% 4.9%;
     --primary: 217.2 91.2% 59.8%;

     /* Chart-specific */
     --chart-up: 142 76% 36%;
     --chart-down: 0 84% 60%;
     --chart-volume: 217 91% 60%;
   }
   ```

7. Trading-specific considerations:
   - **Contrast**: Ensure readability for numbers
   - **Color blindness**: Avoid red/green only
   - **Eye strain**: Dark themes for long sessions
   - **Chart colors**: Clear up/down distinction
   - **Alert colors**: Warning/error visibility

8. Apply theme programmatically:
   ```tsx
   import { useTheme } from 'next-themes';

   function ThemeSwitch() {
     const { theme, setTheme } = useTheme();
     return (
       <button onClick={() => setTheme('dark')}>
         Dark Mode
       </button>
     );
   }
   ```