> ## 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.

> All eleven color settings, their defaults, where each is used, and dark mode behavior.

# Colors reference

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

## The eleven settings

| Setting | Default | Setting key | CSS variable |
| - | - | - | - |
| **Primary** | `#7c3aed` | `vara_saas_primary_color` | `--vara-primary` |
| **Secondary** | `#cebdff` | `vara_saas_secondary_color` | `--vara-secondary` |
| **Tertiary** | `#4edea3` | `vara_saas_accent_color` | `--vara-accent` |
| **Background** | `#f8fafc` | `vara_saas_bg_color` | `--vara-bg` |
| **Surface / Card BG** | `#ffffff` | `vara_saas_surface_color` | `--vara-surface` |
| **Text** | `#0f172a` | `vara_saas_text_color` | `--vara-text` |
| **Headings** | `#0f172a` | `vara_saas_heading_color` | `--vara-heading` |
| **Muted Text** | `#55647a` | `vara_saas_muted_color` | `--vara-muted` |
| **Links** | `#7c3aed` | `vara_saas_link_color` | `--vara-link` |
| **Borders** | `#e2e8f0` | `vara_saas_border_color` | `--vara-border` |
| **Dropdown BG** | `#ffffff` | `vara_saas_dropdown_bg` | `--vara-dropdown-bg` |

**Using these in custom CSS**

Reference any of these as a CSS variable in **Appearance → Customize → Additional CSS** or a
child theme. They are defined on `:root`, so they cascade everywhere.

## Where each color is used

| Color | Applied to |
| - | - |
| **Primary** | Buttons, links, active navigation items, focus rings, pagination current page, category pills when active, table-of-contents active heading, scroll-to-top button |
| **Secondary** | Button hover states, subtle tinted backgrounds, hover overlays |
| **Tertiary** | The secondary CTA button, accent badges, stat highlights, dark mode accent adjustments |
| **Background** | The page background behind all content |
| **Surface** | Cards, panels, widget backgrounds, form fields, the scroll-to-top button |
| **Text** | Body copy, lists, table content |
| **Headings** | All headings `h1` through `h6`, and the site title in the header |
| **Muted Text** | Excerpts, bylines, publish dates, reading time, captions, helper text, comment metadata |
| **Links** | Hyperlinks inside post and page content |
| **Borders** | Card outlines, dividers, input field borders, table rules |
| **Dropdown BG** | Navigation submenu panels — this one is separate from Surface so you can style menus independently |

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

| Token | Light value | Dark behavior |
| - | - | - |
| `--vara-bg` | Your Background | Inverted to a dark base |
| `--vara-surface` | Your Surface | Inverted to a raised dark surface |
| `--vara-text` | Your Text | Inverted to a light value |
| `--vara-heading` | Your Headings | Inverted to a light value |
| `--vara-muted` | Your Muted Text | Lightened for contrast on dark |
| `--vara-border` | Your Borders | Lightened so dividers stay visible |
| `--vara-dropdown-bg` | Your Dropdown BG | Inverted to a dark panel |
| `--vara-primary` | Your Primary | Hue retained, contrast adjusted |
| `--vara-secondary` | Your Secondary | Hue retained, contrast adjusted |
| `--vara-accent` | Your Tertiary | Hue retained, contrast adjusted |

**No flash on load**

An inline script runs before the page paints and applies the stored theme. You will not see a
white flash before a dark page renders.

## Elementor propagation

Your colors are written into the Elementor Kit on every page load.

| Theme setting | Elementor global |
| - | - |
| **Primary** | System color `primary` |
| **Secondary** | System color `secondary` |
| **Text** | System color `text` |
| **Tertiary** | System color `accent` |
| Remaining seven | Added as custom global colors |

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

> **Required ratios**
>
> | Content | Minimum ratio |
> | - | - |
> | Body text | 4.5:1 |
> | Large text (24px+, or 18.66px bold) | 3:1 |
> | UI components and icons | 3:1 |

> **The default Tertiary will fail as text**
>
> `#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.

> **Buttons need 3:1, not 4.5:1**
>
> 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.

> **Check both modes**
>
> 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.

## Related

> **[Colors](/getting-started/colors.md)**
>
> A guided walkthrough of branding your site.

> **[CSS and design tokens](/developers/css-and-design-tokens.md)**
>
> Using these variables in your own CSS.


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