Skip to main content

​
Colors

Eleven color pickers, one panel, and they reach further than you might expect — including into your Elementor layouts. Screenshot: Customizer → Vara SaaS → Global Colors showing the eleven color controls Admin path: Appearance → Customize → Vara SaaS → Global Colors

​
Start with these three

If you only change three, change these. Change those three and the entire site re-skins, including every Elementor widget set to “Primary”.
Primary and Tertiary are not decorative. Tertiary defaults to a light mint #4edea3, which has poor contrast as text on white. If you use it for text, darken it. Keep body text in Text and reserve Tertiary for fills and accents. See Accessibility.

​
All eleven settings

​
How your colors reach Elementor

This is the part that makes the panel worth the five minutes. On every page load, the theme writes your colors into Elementor’s active kit:
  • Primary, Secondary, Text, and Accent replace Elementor’s four system colors
  • Your remaining colors are added as custom global colors
So when you set Primary to your brand blue, every Elementor button, heading, link, and icon bound to “Primary” updates automatically — without touching a single widget. Screenshot: Elementor global colors panel showing the theme's brand colors applied
Edit brand colors in the Customizer, not in Elementor. Because the theme writes to the kit on every request, any change you make directly in Elementor → Site Settings → Global Colors will be overwritten the next time a page loads. The Customizer is the single source of truth.

​
Dark mode

Dark mode is handled automatically, and it is not just a filter.
Background and surface colors flip to dark values, text and headings flip to light, and borders are lightened so they remain visible against dark surfaces. Primary, Secondary, and Tertiary keep your chosen hue but are adjusted for contrast.
You do not need to define separate dark colors. You do not need to restyle Elementor. The remapping is handled by the theme’s token layer.
See Dark mode for the toggle and how to turn it off.

​
Choosing colors that work

A short practical guide.
Two or three brand colors is plenty. Every additional color is another thing that can clash with something else on the page.
Body text needs at least 4.5:1 against its background; large headings and buttons need 3:1. Free tools such as WebAIM’s contrast checker will tell you in a second. The theme’s defaults pass WCAG 2.2 AA — an arbitrary replacement may not.
If a link is only distinguishable by its color, it is invisible to many users. Underline it or add another cue.
Toggle to dark mode after setting your colors. If Tertiary text becomes unreadable, darken the color.

​
Live preview

Every color control updates the preview instantly without a page refresh. If a change appears not to apply:
  1. Click a different section in the Customizer, then come back
  2. Check you clicked Apply at the bottom
  3. Hard-refresh the front end (Ctrl/Cmd + Shift + R)
  4. If still stale, clear your caching plugin

Typography

The other half of your brand identity.

Colors reference

Every color setting, its CSS variable, and where it is used.