In this tutorial we're going to be adding a front-end dark mode to an Elementor website.

The content in this article closely follows the steps outlined in our general “How do I add dark mode to WordPress” post from a couple months back, but we've adapted everything here to show you how you can quickly and easily add a dark mode to an Elementor website.

If you're unfamiliar with what dark mode is, think to your iOS device, Facebook Page or Reddit Browser. All of these user interfaces allow you to toggle between a “normal” UI Color Scheme, and a “dark” UI Color Scheme.

Dark mode is a great addition to your website because it makes it easier to read content at night, uses less device battery, and simply looks cool. It's been picking up a lot more popularity in the past couple of years as most major applications and platforms have added their own “night mode”.

If you built a website with Elementor, it's relatively easy to add a night mode to your front end.

The editor already has a back end dark mode -- now it's time to add this functionality to the front end.

When it comes to adding dark mode to WordPress and Elementor, there are two major components. First, is the actual interface that you will use to toggle between the two color schemes, and second is the colors that will be applied when dark mode is toggled.

Finding Dark Mode Colors

The first step to adding dark mode to Elementor is finding/generating the dark mode colors.

We like using a free website called Color Hunt to find dark color palettes that we can easily integrate into our website.

Occasionally, we will simply choose the inverse of the original color on the page. For example, if your background is white, the dark mode version of it would be black. Text coloring is usually converted to white or light grey, and accent colors are typically kept the same if they work on both backgrounds.

Here are some of our go to colors when we make dark modes for Elementor sites:

Read our guide to using Coolors.co here.

Planning Out Your Dark Mode

Once you figured out your dark mode colors, it's helpful to plan which Elementor elements will actually be changed when toggling dark mode on. In some cases, there are already dark backgrounds that don't need to be changed, and in other cases you'll need to change images, fonts, and overall background colors.

Typically, after identifying which elements need to change color when dark mode is toggled, we will assign a custom CSS ID to them using the Elementor editors “Advanced” tab.

Adding Dark Mode To Elementor

To actually add the dark mode to Elementor, we're going to be using a WordPress plugin purpose designed for this task. Of course, you can do this with the JavaScript and CSS (which is essentially what this plugin does), but doing it this way saves you a lot of time and effort.

From our testing, there's no noticeable performance degradation when incorporating darkmode into the site.

The plugin is called WP Night Mode, and is freely available on the WordPress repository. There are a couple other offerings, though WP Night Mode Is by far the most powerful and expandable (not to mention – it’s free!).

This plugin offers the two main things that you need when adding a dark mode to an Elementor website. First, it allows you to place a dark mode toggle switch anywhere on your website via a short code. 2nd, it allows you to define what colors will be applied anywhere on the site when toggling this dark mode.

After installation, add the dark mode toggle to your Elementor website. This is done by adding a shortcode anywhere. In this example, we're going to add the short code to the top of the page (just for demo purposes), but the Elementor Pro Header Editor comes in handy for production applications of Dark Mode in Elementor.

[wp-night-mode-button]Code language: JSON / JSON with Comments (json)

You can also place the shortcode into a sidebar, or directly into the menu by using this plugin. The plugin comes with four built-in toggle styles that you can choose between by specifying in the shortcode.

[wp-night-mode-button style="4"]Code language: JSON / JSON with Comments (json)

After you have placed the toggle, it's time to apply the dark mode styling to your website. First, open the customiser and implement your base coloring.

The night mode tab in the customiser allows you to change your body background, text color, link color, and link hover color. To change anything else, we're going to need to use some custom CSS, which we will discuss in the next section of this article.

To start, populate the coloring options in the customiser with your dark mode color scheme. You can even set the Night/Dark Mode to be the default coloring of your site.

In the customiser, if you toggle dark mode on , you'll see that some changes have been applied, but the site looks a bit broken. This is because the night mode can't be applied to everything that Elementor and your theme have to offer out of the box. Instead, we're going to need to do some custom CSS specification.

Custom CSS Night Mode Application In Elementor

The custom CSS specifier is what makes this plugin so powerful. You don't even need to know custom CSS to apply dark mode to Elementor, as it's very simple and easy to do.

body.wp-night-mode-on .elementor-selector  { night mode styling }

Your workflow is simple: identify the areas that need to have custom CSS dark mode stylings, and then applying the colors.

Currently, our page looks a bit broken with the default nightmode styling (applied in the previous step). To clean things up, we're going to specify everything that doesn't have the dark mode applied to it using our custom CSS.

This can be added on a per page basis by using the Elementor advanced Custom CSS settings for the page, custom CSS input in the WordPress customiser, or a third party plugin like YellowPencil.

You can ensure that your custom CSS styles only apply to night mode by prefixing them with the “body.wp-night-mode-on”, then adding your general selector, and finally adding the styling rules.

For example, this would change any font element that has the CSS class of “element-class” to black only when night mode is toggled on.

body.wp-night-mode-on .element-class { color: #000; }

We're going to be using YellowPencil, and it's our recommended plugin for managing a lot of custom CSS with Elementor. First, we'll cover the Dev Tools workflow, which is free.

Dev Tools Workflow

First, Identify the specific selector of the element that you need to change when dark mode is applied. For example, all of our headings don't change color when the default night mode styling is applied. To ensure that it does, we're going to use custom CSS.

To identify its selector, you can use dev tools or yellow pencil. With dev tools, right click On the element that you need to change for your dark mode styling, and click “inspect element”.

Here you can see that our heading is specified by the h2 selector, and the custom CSS class of “.Elementor-heading-title”

To change this to white when dark mode is on in our Elementor site, we're simply going to make a CSS rule like so:

body.wp-night-mode-on h2 .Elementor-heading-title { color: #fff; }

Essentially, this says that the Elementor heading title class will be white when dark mode is on. When dark mode is off, this styling will not be applied.

We then write down all of the dark mode CSS styling rules on a desktop stylesheet, using the free tool Microsoft Visual Studio Code.

Typically, we will apply styling to general selectors such as h1,h2,h3 or Section or Div, and then fine tune it by using the unique class is assigned to every Elementor element. For example, if we want to change the background color of a specific column in Elementor, all we need to do is identify its unique CSS class.

From that unique CSS class, we generate our CSS rule:

body.wp-night-mode-on .elementor-element-5b14c912 { background-color:rgba(0,0,0,0); }Code language: CSS (css)

Again, this rule is written down in our stylesheet contained in Visual Studio code.

With dark mode in Elementor, we are typically only changing the background color or text color.

The workflow continues until the stylesheet is built. Firefox Devtools to identify the selector of the Element, VS Code to write the css.

We then copy and paste it directly into the custom CSS input under Appearances Customize, and test to see if our night mode/dark mode is now applying to all elements of the site.

⚠ Also, if you want to cut out the “identify a unique class” for this workflow, you can specify your own custom CSS ID or class directly in the Elementor editor, And then generate the dark mode styling from that selector.

Yellowpencil Workflow

Our agency uses YellowPencil as a way to manage custom CSS for our Elementor websites, and wanted to show you how this incorporates into our workflow when adding dark mode to Elementor. With YellowPencil, you can point and click on specific elements, and it will automatically populate your CSS editor with its respective selector.

If you're interested, take a look at this article:

YellowPencil saves us a lot of time, and makes it really easy to apply and manage a lot of custom CSS.

You don't even need to write it, as this tool has a visual user interface which automatically generates CSS from your inputs.

After generating that base code, be sure to prefix it with body.wp-night-mode-on, click save, and it will be applied to your site.

Common Dark Mode CSS Rules For Elementor

You can change most of your major headings by simply:

body.wp-night-mode-on h1, body.wp-night-mode-on h2, body.wp-night-mode-on h3, body.wp-night-mode-on h4, body.wp-night-mode-on h5, body.wp-night-mode-on h6 {color:#fff}
Code language: CSS (css)

You can change section backgrounds by specifying all sections to change with:

body.wp-night-mode-on section {background-color:#2F374A}
Code language: CSS (css)

You can also do this with columns and other selectors.

body.wp-night-mode-on .elementor-column {background-color:#2F374A}
Code language: CSS (css)

Common Elementor CSS selectors include:

• elementor-row
• elementor-image
• elementor-widget
• elementor-button

Elementor likes using span, so you can address elements that look like this,

With:

body.wp-night-mode-on span {background-color:#2F374A}
Code language: CSS (css)

You can also set hover effects (though you'll want to be specific with your selections):

body.wp-night-mode-on span:hover {background-color:pink}
Code language: CSS (css)

If the images work on your dark background, you can leave them alone, but many times you have dark images that need to be changed. You address images in your Elementor dark mode using a collection of methods.

First, you could simply change the background color (like we did in the above example).

you could also apply the CSS filter invert(1) to completely invert the colors. This is great if you have a solid PNG with a transparent background.

taking this a step further, you could incorporate both the brightness and invert filter too change the PNG with a transparent background to white.

Filter: brightness(0) invert (1)Code language: HTTP (http)

You could also simply replace the original image by hiding the it (opacity, display or visibility) and using background-image in its wrapper to replace it with something new.

Other than that, it just consists of you finding the selectors for each of the elements that you need to change the styling for when dark mode in Elementor is applied, writing up the CSS rule, and then adding it to your WordPress website.

Youtube Tutorial

If you're interested, here is our YouTube tutorial. this isn't specifically created for Elementor, but it will give you a general walkthrough and help you visualize the process of adding a dark mode to your Elementor websites frontend.

Conclusion

We hope that this article was helpful and it taught you how to add a front-end dark mode to an Elementor website. For more reading, you can check out this article, though it contains essentially the same information (Not adapted for Elementor).

We apply this effect on many client websites, so if you have any specific questions feel free to reach out in our comments section.