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:
Top comments (0)