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:

   /* 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:

   import { useTheme } from 'next-themes';
   
   function ThemeSwitch() {
     const { theme, setTheme } = useTheme();
     return (
       <button onClick={() => setTheme('dark')}>
         Dark Mode
       </button>
     );
   }