< All Topics
Widget Used
Dark Mode
Knowledge Required
Advanced

Best way to create a dark mode feature for elementor pages and posts by adding a widget in the footer or header area for best possibilities. It has the best in class Night Mode / Dark Mode options with unique switcher options to customize.

Pro tip
Why not add a dark mode to your website using this widget. Some people who like using the dark theme can simply switch or to the dark theme option for their ease. Also, always add an option to enable or disable the dark mode.

How to use the Dark Mode Widget of The Plus Addons For Elementor

The Dark Mode widget comes with many different layout styles to choose from. Let’s understand how to use this widget in the tutorial below.

Table Of Contents

General Steps


Search for the Dark Mode widget from the Elementor screen in the left and then drag and drop it into the content building area. After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to this widget. First, click on the Content tab.

1. Content

Dark Mode

Credit : Gutenberg, WordPress

Style

Select the Style here for the Dark mode.

Background Color

Select the Background Color here for the Dark mode.

Mix Blend Mode

Set what option you want to choose for the Mix Blend Mode.

Position

Right Offset

Enable and set the right offset here.

Bottom Offset

Enable and set the bottom offset here.

Extra Option

Save in Cookies

If enabled, It will remember choice of user and load accordingly on next website visit.

Auto Match OS Theme

If enabled, It will automatically apply based on Mode of Visitor device settings.

Ignore Dark Mode

 You can Ignore classes you want from Dark Mode using this option.

2. Style

The Style tab is used for customizing the appearance of all the Dark Mode widget components. All these styling options include customizing the fonts, colors, background, margins, and padding which are common across all the widgets. So, we have created a single detailed article explaining these Styling Options

Switcher Text Style

Use this option to set the Switcher After/Before text, Offset, Typography, and Color here.

Switcher Style

Use this option to set the Switcher Size, Dot Size, Dot Offset, Background type, Border type, and Box Shadow color here.

3. Advanced

Want to get nerdier with our widgets? Check out the Advanced Tab. They are a common option for almost all the widgets. So, we have written a detailed tutorial explaining how to use these options.
View The Advanced Tab Tutorial

Do you want to rate this article?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Need help?