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.
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.
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.
Select the Style here for the Dark mode.
Select the Background Color here for the Dark mode.
Mix Blend Mode
Set what option you want to choose for the Mix Blend Mode.
Enable and set the right offset here.
Enable and set the bottom offset here.
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.
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.
Use this option to set the Switcher Size, Dot Size, Dot Offset, Background type, Border type, and Box Shadow color here.
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