Apply Theme

Switch or apply a theme variant to a target project.

Parameters

•theme (required): Theme name (vega | nova | maia | lyra | mira)
•target (optional): Target project path (default: current directory)

Usage

code

/apply-theme vega
/apply-theme nova --target ../my-app

Available Themes

Vega (Modern, High-Contrast)

•Primary: Deep blue (#3b82f6)
•Style: Sharp edges, bold shadows
•Radius: 0.375rem
•Best for: Enterprise dashboards, admin panels

Nova (Soft, Warm)

•Primary: Warm orange (#f97316)
•Style: Rounded corners, smooth transitions
•Radius: 1rem
•Best for: Consumer apps, friendly interfaces

Maia (Minimal, Monochrome)

•Primary: Pure black (#171717)
•Style: Clean lines, no color distractions
•Radius: 0.25rem
•Best for: Documentation, content-focused sites

Lyra (Vibrant, Colorful)

•Primary: Purple (#8b5cf6) with pink accent
•Style: Gradients, shadows with color
•Radius: 0.5rem
•Best for: Marketing, creative applications

Mira (Classic, Corporate)

•Primary: Navy blue (#1e3a5f)
•Style: Professional, conservative
•Radius: 0.375rem
•Best for: Business applications, finance

Process

Step 1: Install Theme Package

bash

cd {target}
bun add @crazyone/ui-{theme}

Step 2: Configure Tailwind

Update target's tailwind.config.ts:

typescript

export default {
  content: [
    './src/**/*.{ts,tsx}',
    './node_modules/@crazyone/ui-{theme}/dist/**/*.js'
  ],
  // Theme extends from CSS variables set in styles
}

Step 3: Import Theme Styles

Add to main CSS file (e.g., globals.css):

css

@import '@crazyone/ui-{theme}/styles.css';

Step 4: Update Component Imports

Replace existing shadcn imports with themed variants:

typescript

// Before
import { Button } from "@/components/ui/button"

// After
import { Button } from "@crazyone/ui-{theme}"

Verification

After applying, verify:

• CSS variables are loaded (check --primary in devtools)
• Components render with correct styling
• Dark mode toggle works (if applicable)