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.
And here's the before and after for dark mode applied to one of our predefined layouts.
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.
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.
Design
Go to the design settings and update the following:
- Icon Color: # 666666
- Image / icon alignment: left
- Icon font size: 22 pixels
- Width: 50px
- Alignment of the module: center
- Height: 25px
- Margin: 0px low
- Rounded corners: 4px
- Border width: 2px
- Border color: # 666666
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.
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
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.
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
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
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.
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.
- We can add the CSS class to each element of the page individually.
- 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.
- 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
All specialized sections
Also add the CSS class to the global defaults in the specialized section.
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.
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.
And this is what the page should look like in dark mode.
Additional Resources
Here are others resources that might interest you.
- How to customize typography and layout on Divi
- How to add a reclosable sliding call to action on Divi
- How to align elements on the same line on Divi
- How to create animated sections by clicking on Divi Builder
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.