Customizing Your Site Theme

Your site's theme controls the overall look and feel, including colors, fonts, and styling for buttons, cards, and navigation. Here's how to customize it.

Accessing Theme Settings

In the editor, look at the header bar at the top

Click the "Styles & fonts" button (with the paintbrush icon)

A drawer panel opens on the right side

You'll see three sections: Typography, Your Colors, and Site Theme

Typography Settings

The Typography section lets you customize fonts across your entire site.

Available Typography Settings:

• Headings - Font for all heading text (H1, H2, H3, etc.)
• Paragraphs - Font for body text and descriptions
• Buttons - Font for button labels
• Navigation - Font for navigation menu items

Customizing Typography:

Click on any typography item (e.g., "Headings")

The row expands to show options:

• Font Family - Choose from hundreds of Google Fonts
• Weight - Light, Regular, Medium, Bold, etc.
• Size - Font size (for paragraphs and buttons)

Changes apply instantly across your site

Your Colors (Custom Colors)

This section lets you save custom brand colors for easy reuse.

Adding Custom Colors:

Expand the "Your Colors" section

Click the "+" button

Enter a color name (e.g., "Brand Blue")

Pick your color using the color picker or enter a hex code

Save to add it to your palette

Using Custom Colors:

Once saved, your custom colors appear when:

• Selecting colors in AI-generated components
• Editing theme colors
• Referencing colors in AI prompts ("use my Brand Blue color")

Site Theme

The Site Theme section controls all colors used across your site.

Understanding Theme Palettes

Each theme palette is displayed as a card showing:

• Theme name
• Background color (large preview)
• Color bar showing key colors (background, text, buttons, navigation)
• "Live" badge on the currently active theme

Switching Themes

Scroll through available themes:

• Current Theme - Your active theme (shown first)
• Custom Themes - Themes you've created
• Default Themes - Pre-built professional themes

Click any theme card to apply it

The theme applies to your entire site instantly

Editing Theme Colors

Hover over any theme card

Click "Edit"

The card expands to show all color options:

Available Color Settings:

• Text Color
• Background Color
• Navigation Background & Border
• Navigation Tab colors (background, border, text)
• Navigation Tab Active state colors
• Button colors (background, border, text, icon)
• Copy Button colors
• Icon Button colors
• Image Overlay Text
• Card colors (background, border, text, subtitle, description, price)
• Card Button colors
• Tag colors (background, border, text)
• Footer Border

Click any color to open the color picker

Click "Done" when finished

Creating Custom Themes

Edit the current theme to your desired colors

Click "Create custom" button

Your customized theme is saved to "Custom Themes"

Name your theme for easy identification

Reverting Changes

Made a mistake? Click "Undo" in the Site Theme header to revert to your previous theme settings.

How Themes Apply to Components

New Components

When you add new components:

• AI-generated components automatically use your theme colors
• Library components inherit theme styling

Existing Components

To update existing components to use your theme:

Select the component

Open AI chat

Ask: "Update this component to use my site theme colors"

Component Overrides

Some components may have custom colors that don't change with theme updates. Use AI to sync them with your theme when needed.

Tips for Great Themes

Color Contrast

• Ensure text is readable against backgrounds
• Test buttons are visible and clickable
• Check cards and tags have sufficient contrast

Consistency

• Use your actual brand colors
• Keep the color palette cohesive (2-4 main colors)
• Match colors to your logo and marketing materials

Testing

• Preview your site after theme changes
• Check all pages (home, about, contact, etc.)
• View on desktop and mobile
• Test both light and dark backgrounds in your content