Skip to main content

​
Colors reference

Every color setting in Vara SaaS, what it controls, and what happens to it in dark mode. Admin path: Appearance → Customize → Vara SaaS → Global Colors Screenshot: Customizer → Vara SaaS → Global Colors with all eleven controls

​
The eleven settings

​
Where each color is used

Dropdown BG is intentionally independent. If it were tied to Surface, changing your card background would silently change your menus too. Set it explicitly if your menus need to differ from your cards.

​
Dark mode behavior

The theme remaps color tokens when dark mode is active. You do not configure dark colors.

​
Elementor propagation

Your colors are written into the Elementor Kit on every page load.
This is a one-way flow. Edit brand colors in the Customizer. Changes made directly in Elementor → Site Settings → Global Colors are overwritten on the next page load, because the theme writes the kit before Elementor reads it.

​
Contrast guidance

The defaults pass WCAG 2.2 AA. Replacements need checking.
#4edea3 on white is roughly 1.5:1 — decorative only. If you want an accent color you can read, darken it substantially. Something in the #0f766e to #065f46 range reads well on white.
Large button text is fine at 3:1, but keep white-on-primary buttons dark enough. A light primary color with white text will fail.
A color that passes on white may fail on your dark background. Toggle and re-check.

​
Changing colors with confidence

1

Set Primary and Tertiary first

These have the widest reach.
2

Check a dark section

The demo homepage has a dark pricing band. Test your accent there — it is the hardest case.
3

Toggle dark mode

Confirm text, borders, and cards remain legible.
4

Check contrast

Run your key pairs through a contrast checker.
5

Apply and verify

Check an Elementor page — your colors should already be there.

Colors

A guided walkthrough of branding your site.

CSS and design tokens

Using these variables in your own CSS.