Adding dark mode to any Elementor site in five minutes.

Dark mode is easiest when the site already uses Elementor global colors. ECS builds on that structure instead of asking you to restyle every widget by hand.

What the module adds

Dark Mode Colours adds a Default Colours tab to Elementor Site Settings. Each color slot gets two values: one for the normal scheme and one for dark mode. ECS then outputs the matching CSS variable overrides.

Step 1: enable the module

1. Go to ECS → Modules.
2. Enable Dark Mode Colours.
3. Open Elementor, then open Site Settings.
4. Use the Default Colours panel to define the light and dark values.

If a dark value is empty, the color picker can show the corresponding default color as a reference swatch. That makes unfinished palette work easier to spot.

Step 2: add the switcher

Add the ECS Dark Mode Switcher widget to the header, menu area, or another persistent template. The widget supports display styles such as toggle, dual control, and dropdown. It also includes responsive alignment, icon, label, and icon-position controls.

Step 3: understand the data attribute

When dark mode is active, ECS adds data-ecs-scheme="alt" to the <html> element. Custom CSS can target that state directly.

document.documentElement.setAttribute('data-ecs-scheme', 'alt');
document.documentElement.removeAttribute('data-ecs-scheme');

The built-in switcher stores the user preference in localStorage and reapplies it on page load, so the choice persists without a server round trip.

Step 4: follow OS preference

Enable Follow OS Preference when you want ECS to read prefers-color-scheme: dark. Users with a dark system theme get the alternate palette automatically.

Testing checklist

• Toggle dark mode and reload the page.
• Check that the <html> element receives data-ecs-scheme="alt".
• Inspect any component that does not change; it may use a hardcoded color instead of an Elementor global color.
• Test header, footer, archive, post, and checkout or lead pages if the site has them.

If the site was built with global colors, the setup is genuinely quick. If older pages use hardcoded hex values, the module still gives you the right structure, but the cleanup takes a little longer.