Themes & Styling
Last updated: March 2026
Control the visual identity of your website and applications with themes, global variables, and responsive design tools. Set brand colors, typography, and spacing that apply consistently across all pages.
On this page
Theme configuration
Themes define the overall visual style of your workspace. The theme configuration modal lets you set global design properties that are inherited by all pages and components. You can choose from built-in theme presets (default, dark, light) or create fully custom themes.
Each theme controls foundational properties like primary and secondary colors, background colors, text colors, font families, and base spacing. When you switch themes, all pages that use theme variables update automatically, ensuring visual consistency across your entire site.
Open theme settings
Go to Designer > Themes. The theme configuration modal shows your current theme with all adjustable properties.
Choose a base theme
Select a starting point: Default (neutral), Dark (dark backgrounds, light text), Light (clean, minimal), or Custom (start from scratch).
Customize properties
Adjust colors, fonts, and spacing. Changes preview in real-time. Set primary brand color, text color, background color, accent colors, and link colors.
Apply and save
Click "Apply" to update all pages using theme variables. The theme is saved to your workspace and persists across sessions.
Global variables
Global variables are reusable design tokens that you define once and reference throughout your pages. They go beyond simple theme presets by letting you create custom variables for any CSS property: specific button colors, section backgrounds, heading sizes, border radii, and more.
The Global Variable Theming Service manages variable sets that can be applied to pages. Each page can optionally reference a global variable set. When a variable value changes, every component that references it updates automatically. This is the mechanism that makes site-wide design changes instant.
Use global variables for any value you might want to change across your entire site at once: brand colors, standard spacing, border radius, shadow values, or font sizes.
Responsive design
Every component in the page builder supports three responsive breakpoints: Desktop, Tablet, and Mobile. Each breakpoint can have independent style overrides for typography, spacing, visibility, and layout. The builder toolbar provides device preview buttons to switch between breakpoints while designing.
Responsive styles are managed through a cascade system. Desktop styles serve as the base. Tablet overrides apply on screens below the tablet breakpoint, and mobile overrides apply on the smallest screens. You only need to set overrides for properties that change - unset properties inherit from the larger breakpoint.
| Breakpoint | Applies to | Overridable properties |
|---|---|---|
| Desktop | Large screens (default) | All style and advanced properties |
| Tablet | Medium screens | Font size, spacing, visibility, layout direction |
| Mobile | Small screens | Font size, spacing, visibility, layout direction, grid columns |
Component-level styling
Each component has a Properties panel with two main sections: Style and Advanced. The Style section controls visual appearance - colors, typography (font family, size, weight, alignment), backgrounds (solid colors, images with size/position/repeat), borders (width, color, radius), and text effects (text shadow, web stroke).
The Advanced section handles layout properties: margins, padding (individually per side), position (static, relative, absolute, fixed, sticky), z-index, and custom CSS classes. You can add any custom CSS class name to a component, which lets you apply styles defined in an external stylesheet or the page-level custom CSS.
Hover states and interactions
Components support hover state styling for interactive elements. You can define different background colors and opacity values for normal and hover states. When a user moves their cursor over the component, the hover styles are applied with a smooth transition.
Menu components have extended color state support with three states: normal, hover, and active (currently selected). Each state can have independent text color, background color, and opacity values. This is especially useful for navigation menus where you want clear visual feedback.
Custom CSS
For advanced styling needs, every component supports a custom CSS field where you can add class names. Additionally, the page builder supports page-level CSS through the Dynamic CSS Manager, which injects custom styles into the page at render time.
The CSS Engine handles the compilation and injection of all component styles, including responsive breakpoints, hover states, and dynamic expressions. Styles are scoped to prevent conflicts between components and pages.
Custom CSS is powerful but can override theme and component styles unexpectedly. Test your custom styles across all responsive breakpoints to avoid layout issues on different devices.