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

> How the toggle works, what remaps in dark, and how to customize or disable it.

# Dark mode

# Dark mode

Vara SaaS ships with a complete dark mode. It is not a filter — the color tokens are designed to be remapped.

![Screenshot: the same page in light and dark mode side by side](https://mintlify.s3.us-west-1.amazonaws.com/vr-it-services-pro/images/screenshots/dark-mode-comparison.png)

## The toggle

A light/dark switch appears in the navbar, on desktop and on mobile.

**Admin path:** Appearance → Customize → Vara SaaS → General → Show theme toggle in navbar

> [!WARNING]
>
> **Turning the toggle off hides the button; it does not disable dark mode.** Anyone who previously chose dark mode keeps dark mode. To force light mode for every visitor you need a small code change, shown below.

## How it works

| Behavior | Detail |
| - | - |
| **Default** | Light mode |
| **Persistence** | Your choice is stored in the browser and remembered across visits |
| **Flash prevention** | An inline script runs before the page paints, so there is no white flash before a dark page renders |
| **Scope** | Per browser, per device — not synced between them |
| **Dark mode Elementor remapping** | Elementor's global colors are adjusted so builder content remains legible in dark mode |

**No flash of light**

This is handled properly. A small inline script in the document head reads your stored
preference and applies the theme before any content renders. Many themes get this wrong and flash
white on every page load — this one does not.

## What changes in dark mode

| Token | Light | Dark |
| - | - | - |
| Background | Your Background color | Inverted to a dark base |
| Surface | Your Surface color | Inverted to a raised dark surface |
| Text | Your Text color | Inverted to a light value |
| Headings | Your Headings color | Inverted to a light value |
| Muted Text | Your Muted Text color | Lightened for contrast |
| Borders | Your Borders color | Lightened so dividers stay visible |
| Dropdown BG | Your Dropdown BG color | Inverted to a dark panel |
| Primary | Your Primary color | Hue kept, contrast adjusted |
| Secondary | Your Secondary color | Hue kept, contrast adjusted |
| Tertiary | Your Tertiary color | Hue kept, contrast adjusted |

You do not configure dark colors. The remapping is automatic.

> [!WARNING]
>
> **Accent colors can lose contrast in dark mode.** The default Tertiary — a light mint — is decorative in light mode but can be too bright against dark surfaces, or too dim. Check any accent color you use for text in both modes. See [Colors reference](/customization/colors-reference.md).

## Customizing dark mode

### Target dark mode in CSS

The theme adds a class or attribute to the root element when dark mode is active:

```css theme={null}
/* Your dark-mode overrides */
.vara-dark {
  --vara-primary: #a78bfa;
}
```

Check which selector the theme uses by inspecting the `<html>` or `<body>` element with the toggle on.

### Force light mode

If you want light mode only, add this to a child theme:

```php theme={null}
// functions.php in your child theme
add_action( 'wp_head', function () {
    // Clear any stored preference before the theme script reads it.
    echo '<script>try{localStorage.removeItem("vara-saas-theme");}catch(e){}</script>';
}, 1 );
```

> [!TIP]
>
> If you are not using dark mode at all, hiding the toggle is enough for most sites — existing visitors with dark stored are a vanishingly small group. Only use the code above if you truly need it locked.

### Offer a system preference

To follow the operating system's light/dark setting rather than defaulting to light:

```javascript theme={null}
// In a child theme, or via a custom JS snippet
(function () {
  var stored = localStorage.getItem('vara-saas-theme');
  if (!stored) {
    var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    document.documentElement.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
  }
})();
```

> [!WARNING]
>
> **Only use this once.** The theme already includes an inline script that sets the theme before paint. Adding a second one can cause a flash or a conflict. Test carefully.

## Dark mode and Elementor

This matters more than it sounds.

When dark mode is active, the theme **remaps Elementor's global colors** so builder content stays legible — backgrounds darken, text lightens, and accent colors adjust for contrast. Your Elementor pages therefore work in both modes without a second design.

![Screenshot: an Elementor-built page rendered in dark mode](https://mintlify.s3.us-west-1.amazonaws.com/vr-it-services-pro/images/screenshots/dark-mode-elementor.png)

**Set colors in the Customizer, not Elementor**

Because the theme writes the Elementor kit on every request, brand color changes belong in
**Appearance → Customize → Vara SaaS → Global Colors**. Changes made in
**Elementor → Site Settings → Global Colors** are overwritten.

## Dark mode and images

Images are not modified. This is usually what you want — your logos and photography stay as they are.

If a specific image has a white background that glares in dark mode, you have three options:

> **Use a transparent image**
>
> A PNG or SVG with transparency works in both modes.

> **Use an SVG**
>
> Best option. A monochrome SVG can take `currentColor` and adapt automatically.

> **Swap it with CSS**
>
> In a child theme, show a light-mode image in light mode and a dark-mode image in dark mode.

```css theme={null}
/* In a child theme */
.logo-dark  { display: none; }

.vara-dark .logo-light { display: none; }
.vara-dark .logo-dark  { display: block; }
```

## Testing dark mode

**1. Toggle every page type**

Home, a builder page, the blog index, a single post, an archive, search, 404, and any page with a form.

**2. Check contrast on text**

Body copy, muted metadata, and especially any accent-colored text.

**3. Check images and logos**

Anything with an opaque light background.

**4. Check form fields**

Inputs, textareas, and placeholder text.

**5. Check Elementor content**

Especially sections with hardcoded background colors.

**6. Reload and confirm persistence**

Your choice should survive a reload.

## Troubleshooting

> **The toggle isn't visible**
>
> Check **Show theme toggle in navbar** in the General section.

> **A flash of light before dark mode loads**
>
> A plugin is probably loading before the theme's inline script, or a caching plugin is serving a cached page with the wrong script. Clear your cache and test with caching disabled.

> **My choice doesn't persist**
>
> The preference is stored per browser. Private browsing clears it. Also confirm you are not on HTTP — see [Requirements](/introduction/requirements.md).

> **Dark mode is on but the page looks light**
>
> Either a caching plugin is serving stale CSS, or Elementor content has hardcoded colors. Hardcoded colors win over the theme's remapping.

## Related

> **[Colors reference](/customization/colors-reference.md)**
>
> The full token table and its dark mode behavior.

> **[General settings](/customization/general-settings.md)**
>
> The control that hides the toggle.


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