Dark mode does not have to be a delicate collection of overrides with Divi 5. Light and dark layouts can be created side by side with the same framework and easily adjustable color scheme. Before creating a dark mode palette for it, we will first create a light mode layout. Using Divi 5's Color System and Design Variables, we will apply the palette and construct a dark mode version inside a canvas. Finally, without modifying any particular modules, we will change a few HSL values and observe an instantaneous update in both layouts.
Rather than upgrading modules individually, Divi 5 simplifies the process of managing color choices at the system level. Without searching through a layout, you can establish a limited set of principles, follow them consistently, and modify them later. When coexistence of bright and dark modes is required, that method is particularly helpful. We will create a dark mode palette in this tutorial that complements the light layout and is simple to adjust. To accomplish this, we will combine three characteristics. The System of Colors Used to Define Color Roles You can give your colors distinct roles by using the Color System. A primary color, a secondary color, heading text, and body text can all be defined. Once established, those hues can be used uniformly for buttons, borders, sections, modules, and icons.
This is helpful since you can use the same color across your layout once you have established it. Any element that uses it will automatically update if you update it later. You do not have to redo your design by hand.
Global colors reside in design variables. They keep track of your global color settings and make them accessible throughout the builder. They can be pulled from using presets. They can be pulled out by canvases. They can be pulled from by any module. Additionally, relative colors are supported by variables, which increases the system's adaptability. It is not necessary to make distinct hex values for accents, backgrounds, and text. Hue, Saturation, and Lightness parameters can be used to create them from a basic color. All derived colors will change in accordance with changes made to the source color. The connections are intact.
Canvases provide you with a distinct design space that complements the layout of your home page. Although they are frequently utilized for overlays or off-canvas menus, they are equally effective at handling different design iterations.
The layout in dark mode will be positioned inside a canvas. Both versions use the same color variables, and the light layout remains in the main constructor. You can modify both modes without duplicating content, compare them directly, and create them side by side.
A single color structure can be used to create light and dark layouts side by side by combining the Color System, Design Variables, and Canvases. Changes are still simple to test and improve, the palette remains centralized, and both layouts remain in sync.
We begin with a light-mode layout that already has a distinct and well-balanced color structure before creating dark mode.On a new page, import the layout.This layout uses a simple palette built around two core colors. The primary color handles emphasis, and the secondary color supports it. The heading and body text colors don’t have to be independent choices. They’re derived from the same primary and secondary colors using relative values. Headings come out darker and more prominent, while body text stays softer and easier to read over long stretches. They stay visually connected because they’re derived, not separate decisions.
The layout is a strong contender for dark mode because of its structure. Color responsibilities are clearly defined, and the hierarchy is already evident. Nothing is dependent on values that are hard-coded and would break when the background changes.
Strong contrast is necessary to operate in dark mode. Each color must have a distinct function when the background gets darker in order to maintain the design's readability and organization. Usually, only a few essential colors are needed for a dark palette. The atmosphere is established by the background. Your primary and secondary colors turn into your focal points. The color of the heading and body of the text determines readability. Accent colors manage outlines, borders, and minor user interface elements. This is the color scheme we will use:
These will be saved as Design Variables, allowing you to use any color on any page, module, or preset on your website.
The dark mode version will be positioned inside a canvas. This allows us to apply and experiment with a dark palette in a separate area while maintaining the light arrangement. Click Add Canvas in the Visual Builder after navigating to the Main Canvas menu from the top bar.
Give the Canvas a clear name, such as Dark Mode Layout.
The Canvas should not be added to the page layout. The dark layout remains entirely distinct from the light version if it is left unappended. The page and the canvas are both present. Divi immediately places you in the Canvas view after the Canvas is created. You will see a blank workspace where we will use variables to apply the dark mode color scheme and rebuild the same layout structure.
As of right now, nothing has changed on the front end. There is no change in the light-mode layout. We can work in dark mode on the Canvas without impacting the main site because it provides a parallel design environment. All we need to do now is alter colors by importing the light mode layout once again.
Open the Variable Manager from the Visual Builder's left sidebar after uploading the layout to your newly created canvas. All of your global design variables are created and managed here.
Open the Colors tab. The four primary, secondary, heading, and body text colors from the light mode layout are already defined.We won’t replace these colors. Instead, we’ll keep them as the base colors and create dark-mode variations from them using relative HSL. Click Add Global Color, name it Dark Primary, and create the color variation. First, select the Primary Color to connect the two colors. Then adjust the HSL values to 153 (Hue), -3 (Saturation), and -78 (Lightness), respectively.Next, create a Dark Secondary color by adjusting the HSL values to -66 (Hue), -11 (Saturation), and -67 (Lightness).After saving, both variables will appear in the dynamic color picker anywhere you can apply color inside Divi.These two colors become the base for all the related colors we’ll create next.
Create the text colors as relatives of your primary and secondary colors. Start with a Dark Heading color and select the Dark Primary swatch as the base. We’ll use this variable as the heading color so headings stay linked to the dark-mode palette.
Now create Dark Body Text as a relative color based on Dark Primary. Increase Lightness until the text is comfortably readable on the dark background, then save the variable.Save Variables to confirm both text colors.
Create the Background color as a relative color of the Primary variable to keep it connected to the system. Click Add Global Color and name it Background Color. Select the Primary Color swatch, then click it again to open the Filter Global Color panel. Use the Lightness slider to reduce Lightness until the result is near-black (or as dark as your design needs). Since this is a relative color, it stays tied to Dark Primary, even if the result appears to be standard black.
Save Variables to confirm the background color. The layout now has a dark foundation that works with the heading, body, primary, and secondary variables you already created. This approach keeps your background tied to the palette. If your primary color ever changes hue or tone, the background adjusts with the same filter tools without breaking the system. You can reuse your existing Secondary Color in dark mode, or create a Dark Secondary variation. In this example, we created a Dark Secondary.
The dark mode palette is ready to use. It uses only two independent colors: primary and secondary. Every other color connects to one of these two, which means you can update the entire palette by changing just the base colors.
The primary and secondary colors define the design’s personality. All text, accent, and background colors stay linked to them through relative filters, including the black background. The palette stays consistent, and adjustments remain simple without redoing any part of the layout. Now we can test the palette on a layout. Every heading, paragraph, border, and button will pull color from the system we just created.
At this point, the dark mode palette is fully defined using variables, and the layout inside the Canvas is already connected to those values. Now we’ll verify that everything works as a system. Using The Inspector To Apply Variables Quickly The layout inside the Canvas still uses its default colors. We’ll use the Inspector to apply the dark mode variables in one pass. Select elements directly on the Canvas and use the Inspector to update their color properties. Headings, body text, buttons, icons, and borders can all be connected to Design Variables from the Inspector panel without opening full module settings.This makes it easy to work top-down. Click through the layout, assign variables where needed, and move on without breaking your flow. Once an element connects to a variable, it automatically stays in sync with the rest of the color system. Using the Inspector this way keeps the setup fast and intentional. You’re wiring the layout to the system that controls it, not styling modules individually. Once done, here’s how the layout will look:
The real test is about to begin. Change the primary color by opening the Variable Manager. All other variables will remain unchanged.
As soon as the primary color changes, the entire dark layout updates automatically. Headings, body text, background, accents, and UI details all adjust together because they’re derived from the same base color using relative HSL values. Nothing else needs to be edited. This is what makes building dark mode with variables and relative colors worthwhile. You’re adjusting the rules behind the layout, not restyling it. The Canvas updates instantly, the light layout remains untouched, and both modes stay perfectly in sync. Divi 5’s Color System lets you style the rules behind the design, not individual modules. Dark mode, light mode, and full brand shifts become much easier to manage.
With Divi 5, dark mode doesn’t need duplicated layouts or fragile overrides. By combining the Color System, Design Variables, and a Canvas, you can build light and dark versions side by side using the same structure and shared rules. Once your palette is defined as variables, apply it quickly with Inspector and stress-test it by adjusting a single base color. The dark layout updates instantly. The light layout stays untouched. Both modes remain in sync. The same approach works for brand refreshes and long-term design maintenance.
