> ## Documentation Index
> Fetch the complete documentation index at: https://vr-it-services-pro.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> Brand your entire site — including Elementor — with eleven color pickers.

# Colors

# 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](https://mintlify.s3.us-west-1.amazonaws.com/vr-it-services-pro/images/screenshots/colors-global-colors.png)

**Admin path:** Appearance → Customize → Vara SaaS → Global Colors

## Start with these three

If you only change three, change these.

| Setting | Default | What to do |
| - | - | - |
| **Primary** | `#7c3aed` | Your main brand color — buttons, links, active states, key accents |
| **Tertiary** | `#4edea3` | Your secondary accent — highlights, badges, the opposite CTA button |
| **Text** | `#0f172a` | Body text color |

Change those three and the entire site re-skins, including every Elementor widget set to "Primary".

> [!WARNING]
>
> **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](/performance/accessibility.md).

## All eleven settings

| Setting | Default | What it controls |
| - | - | - |
| **Primary** | `#7c3aed` | Buttons, links, active nav items, focus rings |
| **Secondary** | `#cebdff` | Hover states, subtle tints of Primary |
| **Tertiary** | `#4edea3` | Accent color, secondary CTA, highlights |
| **Background** | `#f8fafc` | The page background behind all content |
| **Surface / Card BG** | `#ffffff` | Cards, panels, dropdown backgrounds |
| **Text** | `#0f172a` | Body copy |
| **Headings** | `#0f172a` | Headings `h1`–`h6` |
| **Muted Text** | `#55647a` | Excerpts, metadata, captions, helper text |
| **Links** | `#7c3aed` | In-content hyperlinks |
| **Borders** | `#e2e8f0` | Dividers, card outlines, input borders |
| **Dropdown BG** | `#ffffff` | The background of navigation dropdown panels |

## 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](https://mintlify.s3.us-west-1.amazonaws.com/vr-it-services-pro/images/screenshots/colors-elementor-global.png)

> [!WARNING]
>
> **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.

> **What remaps in dark mode**
>
> 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.

> **What you do not need to do**
>
> 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](/customization/dark-mode.md) for the toggle and how to turn it off.

## Choosing colors that work

A short practical guide.

> **Keep the palette small**
>
> Two or three brand colors is plenty. Every additional color is another thing that can clash with something else on the page.

> **Check contrast for text**
>
> 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.

> **Never use color alone to convey meaning**
>
> If a link is only distinguishable by its color, it is invisible to many users. Underline it or add another cue.

> **Test in both light and dark**
>
> 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

## Related pages

> **[Typography](/getting-started/typography.md)**
>
> The other half of your brand identity.

> **[Colors reference](/customization/colors-reference.md)**
>
> Every color setting, its CSS variable, and where it is used.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.