Website under construction

Frontend dark mode for Elementor

Build cleaner Light and Dark color systems with Elementor Global Colors.

PaleSwitch PRO helps you generate, manage, reuse and export Light/Dark palettes for Elementor, using the Global Colors from your Site Kit as the foundation.

Download Free Version
Watch Demo
  • Elementor Widget
  • Magic Palette
  • Templates
  • Backups

For Elementor

Built around Elementor Global Colors and frontend widgets.

For Designers

Create reusable Light/Dark palettes without repeating manual work.

For Real Projects

Export, backup and reuse your color systems across websites.

Frontend dark mode for Elementor

Everything you need to manage frontend dark mode in Elementor.

Palette Switch Pro turns your manual dark mode workflow into a structured color system for Elementor projects.

01
Magic Palette

Generate Radix-inspired color steps from a primary color, including backgrounds, borders, solids and accessible text.

02
Global Colors Sync

Use Elementor System and Custom Global Colors as the base of your Light/Dark design system.

03
Templates

Save reusable palette templates and apply them across projects to speed up your workflow.

04
Backups

Create restore points before making color changes and safely return to previous palette versions.

05
Import / Export

Move color systems between sites without rebuilding every Light/Dark value manually.

06
Frontend Switch

Add a switch widget to your Elementor pages and let visitors toggle Light/Dark mode on the frontend.

07
System Preference

Respect the visitor OS preference or define a default theme from the plugin settings.

08
Generated CSS

Automatically generate CSS variables under html[data-theme="dark"] for Elementor colors.

Workflow

Stop rebuilding dark mode from scratch on every Elementor site.

Palette Switch Pro keeps the workflow organized: define your colors once, generate the dark CSS, reuse templates and keep backups before making changes.

Start with Elementor Global Colors

Use the colors already powering your Elementor Site Kit.

Generate or define dark values

Use Magic Palette or manually adjust each dark counterpart.

Save templates and backups

Reuse your color systems and protect your work before major changes.

Publish frontend dark mode

Use the switch widget and generated CSS to toggle Light/Dark mode for visitors.