Free

Dark Mode Demo

Toggle dark mode. The choice persists in localStorage and can follow the system preference.

What it does

Dark Mode Toggle sets data-ltxe-theme on the document and stores the preference. Use it with CSS variables so headings, cards, and body text flip together.

Works with free Elementor
No Elementor Pro required
Copy the live setup

Live demo

Sample surface

This card uses the theme variables. Toggle above and the background, text, and border should flip without a reload.

How to implement

Add Dark Mode Toggle to a header or utility bar.
Choose icon, switch, or text style, and a default of system, light, or dark.
Style page surfaces with the CSS variables the widget prints, or your own [data-ltxe-theme="dark"] rules.