Color Schemes
Unlimited named colour palettes mapped onto Elementor's global color IDs. Switch the active scheme globally, per page, or via Custom Looks — without touching a single widget.
How it works
Elementor has one set of global colors. Color Schemes adds as many named palettes as you need. Each scheme maps new values onto every Elementor global color — system colors and custom colors alike — plus any extra CSS custom properties you want to define.
Navigate to Site Settings → Color Schemes to create and manage palettes.
Activating a scheme
| Method | How |
|---|---|
| Global default | Set as the site-wide active scheme in Color Schemes settings |
| Per page / post | Override in the page's ECS panel inside the Elementor editor |
| Conditionally | Attach to a Custom Look with display conditions and/or time intervals |
| Visitor-controlled | Drop the ECS Color Scheme Selector widget on any page |
ECS Color Scheme Selector widget
A front-end widget that lets visitors switch palettes at runtime. Useful for seasonal campaigns, contrast modes, or brand variants. The selection persists across pages for the duration of the session.
Use cases
- Seasonal campaigns: a "Christmas" scheme goes live on 1 December — reds and greens, no template edits.
- Sub-brand sections: a product category gets its own palette without duplicating any pages.
- Advanced dark mode: a dedicated dark scheme activated by a Custom Look at night, or by the visitor toggle.
- Agency delivery: let clients switch between approved brand variants from a front-end selector.
Color Schemes overrides work at the CSS custom property level. Every widget that references a global color token automatically picks up the active scheme — no per-widget work needed.