201 elements · 925 sections · Works with free Elementor
Seven toggle designs, three ways to go dark, the whole page or one section. It remembers each visitor’s choice with no white flash, can follow the device or the clock, and switches with a circle that grows from the button. Try any toggle below — the whole page changes.
Day & night skystars, clouds, sun → moon
Classic switchicons inside the track
Sun ↔ moon iconthe sun morphs into a moon
Eclipsethe moon slides over the sun
Light · Dark · AutoAuto follows the device
Pill with texticon and words swap
Icon with a menuLight, Dark or Auto
The default mode. Switch any toggle above — or the floating moon button in the corner — and watch these cards.
Dark sections stay dark
Sections that are already dark — or strongly colored, like your brand buttons — are left exactly as they are.
No white flash
The visitor’s choice is saved in their browser and applied before the page appears — so the next page opens dark straight away. Reload this page in dark mode to see it.
The floating button (bottom right) controls the same page as the toggles above. This page remembers your choice for this page only.
For sites and apps that already have dark styles. The toggle only adds a class and data-theme="dark" to the section; your CSS variables do the rest.
- ✓Light · Dark · Auto buttons
- ✓Auto follows the visitor’s device setting
- ✓Only this section changes
Here’s your week so far
Tasklane is a fictional app.
The palette mode scans the section once: light backgrounds become your dark background and card colors, dark text becomes light text, light borders get softer. Code blocks that are already dark stay as they are.
- ✓Icon with a Light / Dark / Auto menu
- ✓Your own background, card, text, heading, link and border colors
- ✓Dark code blocks are left alone
Example documentation page.
Photos look richer on a dark page. Here the eclipse toggle darkens only this gallery section — the photos themselves stay exactly as shot.
- ✓Eclipse design
- ✓Only this section goes dark
- ✓Photos stay natural
Ella Rae Photography is a fictional studio.
Set “Auto” to follow the clock: this section switches to dark from 7 p.m. to 7 a.m. in the reader’s time zone. Readers can still pick Light or Dark themselves.
- ✓Pill toggle with words
- ✓Auto = dark from 7 p.m. to 7 a.m.
- ✓Smart invert on one section
Lake cleanup volunteers set a new record
More than 600 people turned out on Saturday morning.
BUSINESS
Downtown bakery opens a second shopWEATHER
Clear skies all weekendSPORTS
Riverside wins in overtimeThe Evening Ledger and its stories are fictional.
Made for blogs, news sites, docs, SaaS apps, portfolios and online stores.
Add the toggle
Put it in your header, a corner or any section — seven designs, any size and colors.
Choose how it goes dark
Smart invert for any site, a color palette, or just a class for your own dark styles.
Done
Visitors’ choices are remembered with no white flash, and “Auto” follows their device or the clock.