A better way to implement dark mode in Astra theme

Jael Meire — Fri, 17 Apr 2026 01:07:10 +0000

Astra doesn’t include a native dark mode, so most solutions rely on plugins that automatically invert colors and the result usually looks wrong.

I ran into this problem while working on several WordPress projects using Astra.
What I needed wasn’t automatic color inversion, but actual control over the color system.

After testing multiple plugins, I noticed the same issues:

Colors were inverted blindly
Design consistency was lost
Custom palettes were often limited or locked

So instead of modifying rendered colors, I took a different approach:

I remapped Astra’s global color variables directly.

This avoids runtime color inversion and keeps styles predictable, since everything is based on the same design system.

What the plugin does:

Works specifically with Astra theme
Supports custom color palettes
Includes toggle, shortcode and widget
Keeps the original design structure intact
Lightweight and non-intrusive

I turned this into a free plugin:

WordPress.org plugin directory: Easy Dark Theme for Astra
Open source code: GitHub Repository

If you’re using Astra in real projects, I’d really appreciate any feedback.

Control + Animation sections (complete view):

Astra Global Colors (Free Preset Palette selected):

Astra Global Colors (Custom Palette selected):

Accessibility + Tools sections:

DEV Community: Jael Meire

A better way to implement dark mode in Astra theme