Dark Mode Colours
Adds a Default Colours tab to Elementor Site Settings with full dark mode support — two colour pickers per swatch, automatic CSS variables, and a live mode switcher.
Setup
- Enable Dark Mode Colours in ECS → Modules.
- Open the Elementor editor → hamburger → Site Settings.
- Click the new Default Colours tab.
- Each colour has a Default picker and a Dark Mode picker side by side.
- Save. ECS generates CSS variables and dark mode overrides automatically.
Dark mode
When dark mode is active, ECS adds data-ecs-scheme="alt" to the <html> element. Overrides are scoped to this attribute with higher specificity than Elementor's kit stylesheet.
/* Generated by ECS — do not edit manually */
[data-ecs-scheme="alt"] .elementor-kit-123 {
--e-global-color-primary: #1a1a2e;
--e-global-color-secondary: #16213e;
}Triggering dark mode from JavaScript
document.documentElement.setAttribute('data-ecs-scheme', 'alt');
document.documentElement.removeAttribute('data-ecs-scheme');The built-in ECS switcher stores the preference in
localStorage and re-applies it on page load.OS preference detection
Enable Follow OS Preference. ECS reads prefers-color-scheme: dark and activates dark mode for users with a dark OS theme.
Dark Mode Switcher widget
| Control | Options |
|---|---|
| Display type | toggle / dual / dropdown |
| Label (light / dark) | text |
| Icon (light / dark) | icon picker |
| Icon position | before / after |
| Alignment | responsive (start / center / end) |
Fallback swatches
When a dark colour is left empty, the picker shows the default as a semi-transparent reference swatch.
CSS variables reference
| Global Colour | CSS variable |
|---|---|
| Primary | --e-global-color-primary |
| Secondary | --e-global-color-secondary |
| Text | --e-global-color-text |
| Accent | --e-global-color-accent |
| Custom colours | --e-global-color-{id} |