NewThe Supreme Bundle: every Divi Supreme plugin, 31% less than buying separately.See what’s inside →

Divi 5 Ready

Sign in

Get Supreme Bundle

Dark Mode Toggle Divi 5 · Divi Supreme Pro extension

Dark mode for Divi, in your colors.

A floating switch or toggle module, your own dark palette, and per-section overrides. No code needed.

Get Divi Supreme ProBuild your switch
This whole page has dark mode.Flip the switch, or press Alt + D.

12

dark palette colors

4

Apply Surface levels

5

switch content modes

3

default modes: System, Light, Dark

Design the dark version right in Divi.

Click Dark on the builder bar. The customiser opens and your page previews in dark while you pick colors, Theme Builder header included.

DWireframeLayersSave
Click Dark on the builder bar
  • Preview onlyThe builder preview lasts for your session and never saves as a visitor preference.
  • Theme Builder tooHeaders and menus in the canvas preview in dark, with logo swap applied.
  • Per breakpointPalette colors and switch layout can change on Tablet and Phone. Phone inherits Tablet, Tablet inherits Desktop.
  • Live as you editOverrides and custom dark CSS show on the canvas while you work.

Float it, or put it in the header.

Use a floating switch for the whole site, or drop the Dark Mode Toggle module into a Theme Builder header. Both share the same styles.

Placement
Style
Content mode
Switch position

The floating switch respects safe-area insets, so a phone notch never clips it.

Divi SupremeModulesLayoutsPricing

Free layouts for every niche.

Landing pages for cafes, clinics and agencies, ready to import into Divi.

See all layouts
Cafe
Dental
Agency
  • Colors per schemeBackground, foreground and icon color for light and for dark, plus accent and track color.
  • Size and shapeSize (48px by default), horizontal padding, border, radius and a box shadow for each scheme.
  • PlacementFour corners, Offset X and Y, stacking (z-index) and an optional hover lift.
  • Your own icons or imagesBeyond sun and moon and text labels, use Custom icons or Custom images for each scheme, and set the label font.

Your dark palette. Not an invert filter.

Invert filters turn photos into negatives and push your brand color somewhere strange. Here you set each dark color yourself.

Invert filterPhotos and brand color break
Your dark paletteBrand color stays on-brand

Set all 12 colors, from Link hover to Input border. Leave the input colors empty and they follow Surface, Text and Border.

You decide how much goes dark.

Apply Surface to sets how far the dark Surface color reaches across your modules. A module override always beats the automatic fill.

SectionPainted background
ImagePhoto
BlurbFeature card
TestimonialReview
PricingPlan
Supreme Blog CarouselPost cards
TextBody copy
ToggleFAQ
ButtonGet started

Dark at the right time, without a click.

Follow the visitor's device, pick a default, or switch to dark on a schedule. Once a visitor chooses, the browser remembers.

21:30Dark mode on

Inside the 18:00 to 06:00 window, so the site loads dark.

System

Follows the visitor's device setting. The best default for most sites.

Light or Dark

Pick the scheme first-time visitors see, whatever their device says.

Remembered choice

One toggle and the visitor's pick is stored in their browser until they reset it.

And only where it fits.

Display conditions decide which pages load dark mode. Keep it off checkout, or switch it on page by page.

Display on

One section needs its own dark?

Set a dark background, text, heading, link or border color on any section, row or column. The light design stays exactly as it was.

Element
Dark background override

The right scheme, every visit.

Dark Mode decides in a fixed order, so visitors never have to fight it.

  1. 1The visitor's choiceOnce someone toggles, their pick is saved in the browser and always wins.
  2. 2Your scheduleInside the Auto dark by time window, the site loads dark. The window is checked every minute.
  3. 3Your default modeSystem follows the device setting. Or set Light or Dark for first-time visitors.
Every open tab followsSwitch in one tab and the other open tabs of your site switch too.
Announced to screen readersA polite live region reads out the new scheme, and every toggle keeps its pressed state in sync.
Late headers coveredTheme Builder headers and menu logos that load late still get the logo swap.
Your layout stays untouchedPainted backgrounds are remapped in CSS only. Your saved Divi settings never change.

The details that make it feel finished.

Logo swap

Upload a light and a dark logo. They swap with the scheme, so your logo never vanishes into a dark header. A Logo selector setting targets any image, not only the default Divi logo.

Keyboard shortcut

Pick Alt + D, Alt + M, Ctrl + Alt + D or Shift + Alt + D. Try Alt + D on this page.

Dim images

Set Image brightness (85% by default) so photos do not glare. Swapped logos stay crisp.

Reset the choice

Visitors clear their saved scheme with a long-press, a double-click, or both. You set the timing.

Hooks for developers

Emit a custom event when the scheme changes and run your own code. No analytics SDK is loaded.

Custom dark CSS

For the last 1%, the Advanced tab takes extra CSS that only runs in dark mode. Start from a snippet for the html.dsm-dark prefix, a Theme Builder header, a section background or the Menu module.

html.dsm-dark .et_pb_section.promo {
  background-color: #111 !important;
}

Switch it on. One click.

Dark Mode Toggle ships inside Divi Supreme Pro. Turn it on from the Divi Supreme Settings screen, next to the other 15 extensions.

  1. Open Divi Supreme SettingsIn WordPress, go to Divi Supreme, then Extensions.
  2. Switch on Dark Mode ToggleIts card shows On. Turn off any extension you do not use.
  3. Build in DiviOpen the Visual Builder. The Dark Mode customiser opens from the builder toolbar.
Read the Dark Mode Toggle docs →

Divi Supreme Settings

This is where you can enable Divi Extensions.

Page Tour
Documentation →
Tooltip
Documentation →
Divi Popup
Documentation →
Line Hover Animation
Documentation →
Mouse Parallax
Documentation →
Image Parallax
Documentation →
Custom Cursor
Documentation →
Preloader
Documentation →
Dark Mode Toggle
Documentation →
Icon Libraries
Documentation →
Mask & Pattern Library
Documentation →
Divi Library Widget
Documentation →
Copy to Clipboard
Documentation →
Client Handoff
Documentation →
Password Protection
Documentation →
Contact Form Pro
Documentation →

Divi tips for designers, once a month.

New extensions, dark mode palettes that work and free layouts. Short, practical, written for people who build Divi sites.

One email a month. Unsubscribe in one click.

Get Dark Mode Toggle with Divi Supreme Pro.

Dark Mode Toggle ships inside Divi Supreme Pro, with 70+ modules and 15 more extensions. One plugin, unlimited sites.

Divi Supreme Pro

$79/ year

Updates and support for 12 months. Renews at 30% off.

  • The Dark Mode Toggle extension
  • 70+ Divi modules and 15 more extensions
  • Unlimited sites, client work included
  • Runs on Divi 5
Get Divi Supreme Pro

Save 31%

All-Access, 4 plugins

$129first year$186

Divi Supreme Pro plus three more plugins. Renews at $90/yr.

Divi Supreme ProIncludes Dark Mode Toggle

Supreme Mega MenuMenus from Divi layouts

Supreme Maps ProGoogle Maps and Leaflet

Supreme AI WriterText, images, stock media

Get All-Access - 4 Plugins

4.9 rated, on 350,000+ Divi sites14-day money-back guaranteeUnlimited sites on every planEach plugin keeps its own license key

Not ready to buy? Try 20+ modules free with Supreme Modules Lite.

Questions, answered.

Every setting is in the Dark Mode Toggle docs. Something else? Ask the team.

Is Dark Mode included in Divi Supreme Pro?

Yes. Dark Mode Toggle is one of 16 extensions in Divi Supreme Pro, with the Supreme Dark Mode Toggle module included. No extra license.

What decides which scheme a visitor sees?

In order: the visitor's own saved choice, then your Auto dark by time schedule, then your default mode (System, Light or Dark). Toggling in one tab updates the other open tabs too.

Can I preview dark mode in the Divi builder?

Yes. Click Dark on the builder bar to open the Dark Mode customiser. Your page, including Theme Builder headers, previews in dark as you edit. The preview lasts for your session and never saves as a visitor preference.

Does it work with Divi 4?

No. Dark Mode is a Divi 5 extension. Most Divi Supreme Pro modules still support Divi 4.

Will dark mode change my light design?

No. Your light design stays exactly as you built it. Dark mode layers your dark palette on top only when a visitor turns it on.

Can it follow the visitor's device setting?

Yes. Set the default mode to System and it follows the device. You can also default to Light or Dark, or switch to dark on a schedule.

Can dark mode turn on at night automatically?

Yes. Turn on Auto dark by time and set a start and end time (18:00 to 06:00 by default). A visitor who has picked a scheme keeps their choice.

Can I limit dark mode to some pages?

Yes. Under Display conditions, choose Entire site, Specific pages only (include), All pages except (exclude), or Per page, then turn on Enable on this page where you want it.

What happens to my logo and images?

Upload a light and a dark logo and they swap with the scheme. You can also dim images in dark mode so photos do not glare.

Is it accessible?

Link hover doubles as the keyboard focus color, and you can turn on a keyboard shortcut: Alt + D, Alt + M, Ctrl + Alt + D or Shift + Alt + D. Visitors always choose their own scheme.

Pairs well with

All 16 extensions →

Tooltip

Add a tooltip to any module from the Advanced tab.

Preloader

A branded loading screen you design in the builder.

Custom Cursor

Site-wide custom cursors with live preview and scope rules.

Give visitors the dark mode they already expect.

Switch on Dark Mode Toggle, set your palette and pick where the switch lives. Done before your coffee cools.

Get Divi Supreme ProRead the docs
Dark Mode Toggle, included in Divi Supreme ProFrom $79/yr · Divi 5 · 14-day refundGet Divi Supreme Pro
Divi Supreme