How To Add Dark Mode To Elementor (The Easiest Way)
How Dark Mode is taking over the Internet
The world is evolving towards a digital life, and the internet has evolved with it. With more people using their laptops and mobile devices to consume content, dark mode has become an important demand for its users. Developers are quickly catching on to this trend and releasing dark mode features for their products.
The need for dark mode is increasing in both popularity and necessity. It’s not just about aesthetics any more- it’s about functionality too.
It’s no surprise that people would love to utilize the dark mode on the internet because it makes it easier on their eyes. However, there are key points which you should remember before adding Dark mode to your site
Pros and Cons of Dark Mode
Pros
- Dark Mode Helps You See Better.Its a popular trend in web design, and there are a couple of reasons for this. First, dark mode can increase visibility in dim or dark environments. Second, it reduces eye strain and fatigue from the glaring lights on most devices. Third, designers have begun to design with dark mode in mind, which means that they have been adding more contrast and less glare into their designs to make them easier to view on these screens
- Increases Readability by making screen more efficient. Personally, I feel more comfortably when the text is on night theme. It increases my readability by making the screen more efficient. It also saves battery life on smartphones and laptops since less power is required to display dark colours. There are many situations where dark mode can be useful, like for late night mode reading or when there is a lot of sunlight in the room, and it makes it difficult to read.
Cons
- One of the downsides with adding the dark mode is that some people don’t like it. It can be an inconvenience if you are one of those people who refuse to use it. The main thing to remember is that adding a toggle, using which you can always switch back to your light mode if you are not feeling up for the dark screen.
- Dark Mode, without proper consideration for colour contrast, could cause eye strain and headaches. Therefore, avoid using pure dark colours like #000. Always add a greyish or blueish shade in dark.
That’s all for pros and cons of Dark Mode, now let’s learn how to add Dark Mode on your Elementor website
Watch Detailed Video Tutorial
Steps to Add Dark Mode in Elementor
We will be adding Dark on the complete site, and hence we will add the widget in the header of the site so that it’s shown throughout the site. You can also use footers too or else if you wish to keep dark mode in single page then you proceed to step 3, and add The Plus Addons for Elementor Dark Mode widget directly on that page specifically.
Step 1) Install The Plus Addons for Elementor on your WordPress site
To begin with, Click on Plugins → Add New on your WordPress dashboard, after which you will see the Plugin Repository, and then search for The Plus Addons for Elementor. And then hit Install Now and Activate.
After Activation, you will see The Plus Settings will appear in the bottom-left corner of your WordPress dashboard. Now we are ready, use the Dark Mode widget. To use it, we should already have the Elementor plugin installed, The Plus Addons works on both Free and Pro version.
Step 2) Turning on The Dark Mode widget
Now Head over to The Plus Addon dashboard and click on Plus Widgets to access all the 120+ Widgets and Extension. Now, don’t worry, you don’t have to read through all of them to find the Dark Mode widget 😛
Simply type dark mode in our search bar and turn that on by making the toggle to right side, now we are ready to play in Elementor editor.
Step 3) Adding Dark Mode widget in Elementor Editor
Now that we have activated the widget, let’s open our site Header to add the Dark Mode widget site wide.
You can edit your Header template either using Elementor PRO Theme Builder, or use our in-house complete theme builder solution of NexterWP Theme. In this article, we will be using Nexter Builder, but the process will be the same on Elementor Theme Builder too.
Click Edit with Elementor if you already have a header, or hit add new to create a new one.
Then search for dark mode widget in Elementor widgets panel, and drag and drop the widget to the right.
Step 4) Editing and Styling the Dark Mode widget
Let’s begin with customizing the widget, In the content tab you see 3 options dark mode, position and extra options.
In the Dark Mode, you get to choose from multiple styles of toggle to switch from light theme to dark one, you can also upload custom image for the dark mode switch to match your brand/site theme.
After designing, you get positioning controls, which will help you set the toggle position from top to bottom to anywhere you want. You can even make it sticky or static in a specific position of the page.
Now one of the most important settings, extra options helps you fine tune the night mode for your website
These powerful settings help you make the site experience rich for your users.
The first option, save in cookies, stores the selection of user to be in light theme and dark theme. So that once users selects dark theme, whenever he visits your site it will always be on default dark version.
Next one auto-match OS theme, can be handy as this automatically select dark or light mode based on the user’s device preferences. This makes the user experience smooth for your site, as its pre-defined based on the interface users love to interact on the web.
Lastly the classes, if you wish to white-list certain sections from night theme, then you can add the class of that particular element, and dark theme won’t be applied over it. We have already added classes for all plus widgets, which will be automatically whitelisted when you turn it on. This will be handy when you have images, and you don’t wish to add a dark theme to images or any particular plus widgets like table.
Coming our next tab style tab which helps you add custom switch styles and for toggle or choose different shade for dark mode. As personally speaking, it’s not the best practice to use solid dark mode colors of #000.
I would always encourage adding a dark grey or dark blue shade on your website to make it look premium.
And that’s all for the most powerful dark mode plugin for Elementor, I hope this gives your site the premium look and feel it deserves. The widget is completely light, and won’t add any significant load to your website.
End Notes
In this Article, we learned how to add Dark mode in the popular WordPress page builder Elementor.
No doubt adding dark mode theme to your website can give a premium look and feel, but just make sure to add toggles so that no user to forced with one mode, and then can choose what’s convenient for them.
If you wish to know more about the essential features of The Plus Addons for Elementor visit here
