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:

: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