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

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

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

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.

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.

Customizing dark mode

Target dark mode in CSS

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

/* 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:

// 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 );

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:

// 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');
  }
})();

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

Screenshot: an Elementor-built page rendered in dark mode

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.

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

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

Testing dark mode

Toggle every page type

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

Check contrast on text

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

Check images and logos

Anything with an opaque light background.

Check form fields

Inputs, textareas, and placeholder text.

Check Elementor content

Especially sections with hardcoded background colors.

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.

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.

Colors reference

The full token table and its dark mode behavior.

General settings

The control that hides the toggle.

Introduction

Getting started

Customization

Dark mode

Dark mode

The toggle

How it works

What changes in dark mode

Customizing dark mode

Target dark mode in CSS

Force light mode

Offer a system preference

Dark mode and Elementor

Dark mode and images

Testing dark mode

Troubleshooting

Colors reference

General settings

​Dark mode

​The toggle

​How it works

​What changes in dark mode

​Customizing dark mode

​Target dark mode in CSS

​Force light mode

​Offer a system preference

​Dark mode and Elementor

​Dark mode and images

​Testing dark mode

​Troubleshooting

​Related

Colors reference

General settings

Dark mode

The toggle

How it works

What changes in dark mode

Customizing dark mode

Target dark mode in CSS

Force light mode

Offer a system preference

Dark mode and Elementor

Dark mode and images

Testing dark mode

Troubleshooting

Related