Next module, A to Z
Dual Heading Module
Module 19 of 71
Divi Dark Mode Toggle that lets visitors pick the lights.
Put a light and dark switch in your header, footer or anywhere else. Choose the style, icons or labels, and the colours for each mode.
Divi Supreme
WorkAboutContact
Design that works day and night.
Visitors pick the look that suits their eyes. Their choice is remembered on the next visit.
What is the Divi Dark Mode Toggle module?
Dark Mode Toggle is a Divi 5 module in Divi Supreme Pro that places a control visitors click to switch your site between light and dark. Use it in a Theme Builder header, a footer, a menu or any page.
Pick a Pill, Icon or Switch style. Keep the default sun and moon, or use your own icons, text labels, both, or a pair of images. Set background, foreground, icon, accent and track colours for each mode.
switch styles
content modes
max size
custom code
Start from a Dark Mode Toggle recipe.
The recipes and the playground run on the front end. Use Preview, or open the page, to try them.
Design that works day and night.
Visitors pick the look that suits their eyes. Their choice is remembered on the next visit.
Try every Dark Mode Toggle setting.
The recipes and the playground run on the front end. Use Preview, or open the page, to try them.
Design that works day and night.
Visitors pick the look that suits their eyes. Their choice is remembered on the next visit.
Everything Dark Mode Toggle can do.
Three styles
A pill with icon and label, a round icon button, or a sliding switch.
Icons, text or images
Default sun and moon, custom icons, text labels, icons with text, or an image pair.
Colours per mode
Background, foreground, icon, accent and track colours for light and dark.
Place it anywhere
Headers, footers, menus or inside content, with alignment and size.
Accessible
A real button with a clear label and focus outline in your accent colour.
Divi 5 native
Works in the Theme Builder alongside your Divi Supreme dark mode settings.
Dark Mode Toggle documentation
Setup for Divi 5: switch style, content mode, labels, icons, images and colours for each mode.
Questions about Dark Mode Toggle.
Related modules
Content Toggle Module
Switch between two blocks of content.
Menu Module
Headers and mega menus for Divi 5.
On Scroll Header Animation Module
Headers that change as you scroll.
Give visitors the choice.
Dark Mode Toggle comes with 70+ Divi 5 modules and 16 extensions in Divi Supreme Pro.