Dark Mode continues to gain popularity as a convenient option that allows users to experience the web with less strain on the eyes. Let's face it, we all tend to spend more time staring at screens than we probably should, so any added convenience to the user experience (like dark mode) can go a long way. 

Operating systems, programs, and browsers typically include built-in dark mode capabilities, but some developers take it to another level by including a custom dark mode experience for their Website. The idea is to take more control over the appearance of their Website in dark mode without having to compromise on brand and/or design.

In this tutorial, we'll show you how to create a custom dark mode toggle in Divi from scratch without a plugin. With this dark mode toggle feature, you will have control over the dark mode design and have a better user experience tailored to your brand.

Let's start!

Preview

Here is a preview of the design we will build in this tutorial.

Here is the custom dark mode toggle we're going to create.

Toggle dark mode

And here's the before and after for dark mode applied to one of our predefined layouts.

Comparison dark mode light mode

And here's the dark mode toggle added to a global header. Notice how the light / dark mode remains when you browse the site.

Part 1: Building the switch from dark mode

In this first part of the tutorial, we will build a dark mode toggle with a page in Divi. Once the toggle is created with the code, you will be able to save it in the Divi library and add it anywhere in your Website.

To start, add a row of one column to the default section when building from scratch with Divi on the front end.

Divi section

Add Summary Module

To build the custom toggle, we're going to design a Blurb module with a bit of custom CSS.

Add a new presentation text module to the line.

Contents

Remove the contents Default dummy for title and body. Then add the square icon in place of the image.

Divi summary module

Design

Go to the design settings and update the following:

  • Icon Color: # 666666
  • Image / icon alignment: left
  • Icon font size: 22 pixels
Divi icon configuration
  • Width: 50px
  • Alignment of the module: center
  • Height: 25px
Divi sizing configuration
  • Margin: 0px low
  • Rounded corners: 4px
  • Border width: 2px
  • Border color: # 666666
Divi border configuration

Custom CSS

Once the design is in place, switch to the advanced tab. Under Custom CSS, add the following custom CSS to the main element to make sure the overflow is not obscured by the styling of the rounded corners.

overflow: visible! important;

Then add the following custom CSS to the After element:

content: "light"; position: absolute; left: -35px; top: 0px;

This adds a label to the Blurb module which we will change from "light" to "dark" on click.

Divi toggle button

Body text design

Since the post pseudo-element text inherits the body text styles, we can add the body text styles using the Divi options as follows:

  • Body Font: Roboto
  • Body text color: # 666666
  • Body text size: 13px
  • Spacing of the letters of the body: 1px
Font toggle button

Adding custom code with a code module

To add the necessary code (CSS / JQuery) to operate the dark mode toggle, we will use a code module.

Create a new code module under the Blurb module in the same column.

Add code module

Then paste the following code in the code area:

/*** Dark Mode Toggle Styles*/.et-dark-mode {transition: all .5s;}.et-dark-toggle {cursor: pointer;transition: all .5s;}body.et-dark-mode .et-dark-toggle {border-color: #666666;}body.et-dark-mode .et-dark-toggle:after {content:"dark";color: #666666;left: 54px;}body.et-dark-mode .et-dark-toggle .et_pb_blurb_content {text-align:right;}body.et-dark-mode .et-dark-toggle .et-pb-icon {color: #666666;}/*** Body Dark Mode Style*/body.et-dark-mode {background-color: #23282d !important;}/*** Divi Element Dark Mode Styles** Here you can add styling for each Divi Element that has the class "et-dark-mode-capable".*//* Section with dark mode */.et_pb_section.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;background-blend-mode: overlay;transition: opacity .5s ease-in-out;color: #dddddd !important;}/* Row with dark mode */.et_pb_row.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;color: #dddddd !important;}/* Column with dark mode */.et_pb_column.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;color: #dddddd !important;}/* Module with dark mode */.et_pb_module.et-dark-mode-capable.et-dark-mode {background-color: transparent !important;color: #dddddd !important;}/* Text Headings with dark mode */.et_pb_module.et-dark-mode-capable.et-dark-mode.et_pb_module_header,.et_pb_module.et-dark-mode-capable.et-dark-mode h1,.et_pb_module.et-dark-mode-capable.et-dark-mode h2,.et_pb_module.et-dark-mode-capable.et-dark-mode h3,.et_pb_module.et-dark-mode-capable.et-dark-mode h4,.et_pb_module.et-dark-mode-capable.et-dark-mode h5,.et_pb_module.et-dark-mode-capable.et-dark-mode h6 {color: #dddddd !important;}function storageAvailable(type) {try {var storage = window[type],x = '__storage_test__';storage.setItem(x, x);storage.removeItem(x);return true;}catch(e) {return e instanceof DOMException && (// everything except Firefoxe.code === 22 ||// Firefoxe.code === 1014 ||// test name field too, because code might not be present// everything except Firefoxe.name === 'QuotaExceededError' ||// Firefoxe.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&// acknowledge QuotaExceededError only if there's something already storedstorage.length !== 0;}}jQuery(document).ready(function($) {var storageAvailable = window.storageAvailable('sessionStorage');$(".et-dark-toggle").click(function() {$(".et-dark-mode-capable,body").toggleClass("et-dark-mode");if ( storageAvailable ) {$("body").hasClass("et-dark-mode") ?sessionStorage.setItem('etDarkModeEnabled','1'):sessionStorage.removeItem('etDarkModeEnabled');}});if (storageAvailable) {'1' == sessionStorage.getItem('etDarkModeEnabled') ?$(".et-dark-mode-capable,body").addClass("et-dark-mode"):$(".et-dark-mode-capable,body").removeClass("et-dark-mode");}});

Adding custom CSS classes

Custom code requires you to have a custom CSS class added to the Blurb module or switch. This will allow the blurb to trigger the dark mode toggle and on-click functionality.

Blurb module class

Open the Blurb module settings and add a custom CSS class as follows:

  • CSS class: et-dark-toggle
Divi css code

Class capable of dark mode

We also need to add a custom CSS class to each Divi element that we want to have the dark mode capability. Once the element has the CSS class, that element will inherit the custom “dark mode” CSS in the code we added after dark mode was enabled. This method gives us more control over our dark mode design, as some elements may not require styling in dark mode.

To start, we can add dark mode to the section containing our dark mode toggle.

Open the section parameters and add the following CSS class:

  • CSS Class: et-dark-mode-capable
Css selector divi section

Part 2: Adding Dark Mode Features to a Divi Page

Now that we have the CSS code and classes in place, we're ready to apply the Dark Mode functionality and design to an entire page in Divi. To do this, we will be using our Premade layout of the mobile app landing page.

To add the layout, open the settings menu at the bottom of the visual builder and click the Add new layout icon.

Then select the layout of the mobile app's landing page from the Predefined Layouts tab.

Make sure the option “Replace contents existing” is NOT selected. You don't want to clear the section with the dark mode toggle.

Choose divi 1 layout

Since the dark mode style will only apply to elements with the "capable and-dark-mode" CSS class, we can choose to add to the page in different ways.

  1. We can add the CSS class to each element of the page individually.
  2. We could extend the CSS class to elements all over the page (that would be faster than doing it manually). For example, we could open the section settings for the top section and extend the CSS class for that section to all sections on the page.
  3. We can add the CSS class to the element's global defaults. This will apply the CSS class to all site-wide elements, adding dark mode capability throughout the site. For example, we could open section settings and click the global default icon to change the global section defaults. Then we can add the CSS class and register it as a CSS class for all sections of the site.

Adding the CSS class to page elements

For this example, we are going to update the page elements by adding the CSS class to global defaults to sections and text modules. And we'll also make some additions to other page elements as we go.

All sections

To add the CSS class to all sections, open the settings of the top section which contains the dark mode toggle. Then change the section global defaults and add the following CSS class to the section global defaults:

  • CSS Class: et-dark-mode-capable
Add css code to all sections

All specialized sections

Also add the CSS class to the global defaults in the specialized section.

Add to all specialized sections

Text modules

Then open the settings of one of the text modules on the page and add the same CSS class to the global text defaults.

Add to text modules

To test the result, go to the live page and click on the dark mode toggle at the top of the page.

Here is what the page should look like in clear mode.

Clear mode

And this is what the page should look like in dark mode.

Dark mode

Additional Resources

Here are others resources that might interest you.

Latest Thoughts

Equipping your Divi site with a custom dark mode toggle can be a great way to boost the user experience and create a whole new design that both pleases and relieves the eye. I hope this will be useful to you.