Theme Editor
Control your landing page's global color scheme with the visual theme editor.
The Theme Editor lets you modify the color scheme of your entire landing page. Changes made here affect all elements that use theme colors.
Accessing the Theme Editor
- Enter Design Mode from the chat panel
- Click Theme in the panel header
- The theme controls appear
When no element is selected in the preview, the Theme Editor is shown by default.
Theme Colors
The theme includes several color categories:
Primary Color
The main accent color used for:
- Call-to-action buttons
- Links
- Important highlights
- Active states
Secondary Color
A supporting color used for:
- Secondary buttons
- Less prominent highlights
- Backgrounds of secondary elements
Accent Color
An additional highlight color for:
- Badges and labels
- Icons
- Decorative elements
Background Colors
Controls the page background:
- Background: Main page background
- Foreground: Default text color (for contrast)
- Card: Background for card elements
- Muted: Subtle background variations
Additional Colors
- Border: Color for borders and dividers
- Input: Background for form inputs
- Ring: Focus ring color
Using the Color Picker
Click on any color swatch to open the color picker:
- Visual picker: Select hue and saturation visually
- Opacity slider: Adjust transparency
- Value input: Enter exact color values
- Color library: Access saved brand colors
Color Formats
You can enter colors in multiple formats:
- Hex:
#1a365d - RGB:
rgb(26, 54, 93) - HSL:
hsl(220, 56%, 23%) - OKLCH: The theme system uses OKLCH internally for better color consistency
Light and Dark Mode
The Theme Editor includes settings for both light and dark mode:
- Light Theme: Colors used when the page is in light mode
- Dark Theme: Colors used when the page is in dark mode
Both themes share the structure but have different color values optimized for their respective modes.
Applying Changes
Changes are applied in real-time:
- Adjust a color using the picker
- See the change immediately in the preview
- All elements using that color token update automatically
Global Effect
Theme colors are CSS variables applied globally. When you change the primary color:
- All buttons using the primary color update
- All links using the primary color update
- All highlights using the primary color update
This ensures consistency across your landing page.
Color Consistency
Theme colors work because components use semantic color tokens rather than hard-coded values:
| Token | Usage |
|---|---|
--primary | Main action color |
--secondary | Supporting actions |
--background | Page background |
--foreground | Default text |
--muted | Subtle backgrounds |
--border | Borders and dividers |
Matching Brand Guidelines
To match your brand colors:
- Open the Theme Editor
- Set Primary to your main brand color
- Set Secondary to your secondary brand color
- Adjust Background and Foreground for your preferred contrast
- Fine-tune other colors as needed
Set up brand themes in Brand > Themes to easily apply consistent colors across all landing pages.
Best Practices
Maintain Contrast
Ensure sufficient contrast between text and backgrounds for readability. Light backgrounds need dark text (and vice versa).
Test Both Modes
If your landing page supports dark mode, check how colors look in both light and dark themes.
Use Semantic Colors
The theme system is designed for consistency. Avoid overriding individual elements with hard-coded colors unless necessary.