← Back to Documentation

Choosing a Theme

Themes define the overall visual style of your website. This guide covers browsing themes, applying them, and understanding what themes control.

What Themes Control

A theme sets defaults for:

| Element | Examples | |---------|----------| | Colors | Background, text, accent colors | | Typography | Font families, sizes, weights | | Spacing | Margins, padding, gaps | | Components | Button styles, card appearances | | Dark/Light | Base mode preference |

Accessing Themes

Open Theme Settings

  1. Click Settings in the top toolbar
  2. Select Theme from the sidebar
  3. Browse available themes

Theme Preview

Hover over any theme to preview:

  • Color palette preview
  • Typography sample
  • Component examples

Available Themes

Minimal Light

Clean, bright, and modern.

  • Background: White
  • Text: Dark gray
  • Accent: Blue
  • Feel: Professional, airy

Best for: Portfolios, corporate sites, photography

Minimal Dark

Elegant dark mode.

  • Background: Near black
  • Text: Light gray
  • Accent: White
  • Feel: Sophisticated, dramatic

Best for: Photography, art, nightlife

Warm

Inviting earth tones.

  • Background: Cream/warm white
  • Text: Brown/dark warm
  • Accent: Terracotta
  • Feel: Cozy, approachable

Best for: Food, lifestyle, crafts

Cool

Crisp, professional blues.

  • Background: Cool white
  • Text: Navy/dark blue
  • Accent: Bright blue
  • Feel: Trust, clarity

Best for: Business, tech, finance

Bold

High contrast, attention-grabbing.

  • Background: White or black
  • Text: Opposite of background
  • Accent: Vibrant primary
  • Feel: Energetic, confident

Best for: Creative agencies, startups

Classic

Timeless, traditional elegance.

  • Background: Off-white
  • Text: Dark charcoal
  • Accent: Gold or navy
  • Feel: Established, refined

Best for: Law firms, luxury brands

Applying a Theme

Select and Apply

  1. Click on your chosen theme
  2. Preview shows across your site
  3. Click Apply Theme
  4. Theme is active immediately

What Changes

When you apply a theme:

  • All color variables update
  • Typography defaults change
  • New content uses theme styles
  • Existing custom styles preserved

What Doesn't Change

Applying a theme won't affect:

  • Your content (text, images)
  • Layout choices
  • Custom overrides you've set
  • Individual block styling

Customizing a Theme

After Applying

Themes are starting points. Customize:

  1. Apply a base theme
  2. Go to Colors to adjust palette
  3. Go to Typography for fonts
  4. Fine-tune other settings

Creating Your Brand

Use theme as foundation:

| Start With | Customize | |------------|-----------| | Minimal Light | Your brand colors | | Bold | Your accent color | | Classic | Your typography |

Theme and Dark Mode

Light vs. Dark

Each theme has a default mode:

  • Light themes: Light background
  • Dark themes: Dark background

User Preference

You can enable toggle:

  1. Go to Settings > Theme > Dark Mode
  2. Enable Allow Visitors to Switch
  3. Toggle appears on site

Both Modes

Themes include both modes:

  • Apply theme (e.g., Minimal)
  • Light mode is default
  • Dark mode variant included
  • Users can switch if enabled

Previewing Themes

Live Preview

  1. Hover over theme in selector
  2. Your actual site shows preview
  3. See colors on your content
  4. Move mouse away to revert

Preview Different Pages

  1. Navigate to different page in editor
  2. Open theme selector
  3. Preview shows on current page

Mobile Preview

  1. Switch to mobile view
  2. Preview themes
  3. See how colors work on small screens

Theme Best Practices

Choosing Right Theme

Consider:

  • Your brand - Does it match your identity?
  • Your content - Photos look good?
  • Your audience - Appropriate tone?
  • Readability - Text easy to read?

Photography Sites

  • Test with your actual images
  • Dark themes make images pop
  • Light themes feel more gallery-like

Text-Heavy Sites

  • Prioritize readability
  • Light backgrounds easier for long text
  • Check contrast ratios

Business Sites

  • Professional themes (Minimal, Cool)
  • Avoid overly playful options
  • Consider industry standards

Switching Themes

Changing Later

You can switch themes anytime:

  1. Go to Theme settings
  2. Select new theme
  3. Apply changes
  4. Republish

Impact of Switching

When you switch:

  • Colors update globally
  • Typography may shift
  • Layout unaffected
  • Custom styling preserved

Reverting

If you don't like a change:

  • Choose your previous theme
  • Or use version history
  • Changes aren't permanent until published

Tips for Success

  1. Start with preset - Don't build from scratch
  2. Customize later - Get layout right first
  3. Test with content - See theme with your actual images
  4. Check dark mode - Ensure both modes work
  5. Preview on mobile - Colors may feel different

Next Steps

Choosing a Theme - Salon Docs