Black Friday Special: Save Up to 75% on Shared Hosting - for a Limited Time Only!

Sign up for updates

How to Build a Clean Dark & Light Theme System in Elementor (Without Per-Widget Styling)

One of the biggest mistakes Elementor users make is manually setting colors on every widget.

It works at first — but it becomes unmaintainable fast.

In this tutorial, I’ll show you how to build a surface-based theme system using just two CSS classes:

  • surface-dark
  • surface-light

Using my approach, you can:

  • You change colors once in CSS
  • Containers decide the theme
  • Text widgets simply inherit
  • No more widget-by-widget color changes
  • Works perfectly with Elementor Global Colors

The Core Idea (This Is the Key)

Containers choose the theme.
Text widgets just inherit.

You should never be picking text colors on individual widgets for normal content.

When to Apply surface-dark (and When Not To)

If your Elementor Global Colors are already dark (like on manzari.com), you don’t need to apply surface-dark. Dark is already the default.

In this setup, you only apply surface-light when you intentionally want to switch context — such as for articles, documentation, or other reading-heavy sections.

If you don’t have default colors set, or you want explicit control everywhere, you can use both surface-dark and surface-light.

Step 1: Define Your Color Variables (One Place Only)

Add this to Appearance → Customize → Additional CSS:

:root {
  /* Dark surface */
  --surface-dark-bg: #0F1A40;
  --surface-dark-text: #C9D2F0;
  --surface-dark-heading: #FFFFFF;

  /* Light surface */
  --surface-light-bg: #FFFFFF;
  --surface-light-text: #333333;
  --surface-light-heading: #202124;

  /* Links */
  --link-dark: #6FA8FF;
  --link-light: #2563EB;
  --link-light-hover: #1D4ED8;
}
JavaScript

If you ever want to change colors later, you do it here — once.

Step 2: Create the Surface Classes

These are the only classes you’ll ever apply in Elementor.

Dark Surface 

.surface-dark {
  background-color: var(--surface-dark-bg) !important;
  color: var(--surface-dark-text);
}

.surface-dark h1,
.surface-dark h2,
.surface-dark h3,
.surface-dark h4,
.surface-dark h5,
.surface-dark h6 {
  color: var(--surface-dark-heading);
}

.surface-dark a {
  color: var(--link-dark);
}
JavaScript

Light Surface

.surface-light {
  background-color: var(--surface-light-bg) !important;
  color: var(--surface-light-text);
}

.surface-light h1,
.surface-light h2,
.surface-light h3,
.surface-light h4,
.surface-light h5,
.surface-light h6 {
  color: var(--surface-light-heading);
}

.surface-light a {
  color: var(--link-light);
}

.surface-light a:hover {
  color: var(--link-light-hover);
}
JavaScript

Step 3: How to Use This in Elementor

Apply classes ONLY to containers (sections)

In Elementor:

  1. Click the container
  2. Go to Advanced → CSS Classes
  3. Add:
    • surface-light for white / reading sections
    • surface-dark only if you explicitly need it

Note: Do not apply these classes to text, heading or paragraph widgets.

Step 4: How to Set Widget Colors in Elementor

For Text and Heading widgets:

  • Leave Color = Default
  • Or use Elementor Global Colors
  • Do NOT manually pick hex values per widget

Your surface classes override them automatically.

/ Recent WordPress Tutorials /