---

name: color-theming description: Color theme selection and application for website branding. Use when user wants to change colors, theme, accent, branding, or visual style. allowed-tools: Read, Write, Edit, AskUserQuestion

Color Theming

Help users select and apply color themes to their website.

Available Themes

Workflow

Step 1: Show Options

If user hasn't specified a color, use AskUserQuestion:

"Which color theme would you like for your website?"

• Blue (#2563eb) - Professional, trustworthy
• Purple (#7c3aed) - Creative, innovative
• Teal (#0d9488) - Fresh, modern
• Amber (#d97706) - Warm, energetic
• Rose (#e11d48) - Bold, passionate
• Custom (provide hex code)

Step 2: Validate Custom Colors

If user provides a custom hex code:

1. Verify it's a valid hex format (#RRGGBB or #RGB)
2. Check contrast ratio against dark background (#0a0e14):
   • Minimum 4.5:1 for WCAG AA compliance
   • Warn if contrast is insufficient

Step 3: Apply Theme

Update styles/variables.css:

Copy:root {
    /* ... other variables ... */

    /* Accent - Updated by color-theming */
    --color-accent: {selected_color};
}

Step 4: Preview

Suggest running preview:

Color updated! Run /preview or just serve to see the changes.

Color Accessibility

For dark backgrounds (#0a0e14), these colors meet WCAG AA:

Deriving Secondary Colors

For --color-accent-secondary, you can:

• Use a complementary hue (e.g., blue + purple)
• Use a lighter/darker variant of the primary
• Default: Keep as #7c3aed (purple) for most themes