To provide the best dark mode experience to your visitors you have to set the dark mode colors properly.
With the Dark Mode widget from The Plus Addons for Elementor, you can easily customize the dark mode colors in Elementor.
To check the complete feature overview documentation of The Plus Addons for Elementor Dark Mode widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.
1. First you have to set Elementor global colors.
2. Then use the Elementor global colors in the layout elements.
3. After that add the Dark Mode widget to the template (if you want to set dark mode on the entire site) or page.
Note: To create the template, you can use the free Nexter Builder or you can use Elementor Pro if you are already using it.
4. Select Global Color from the Type dropdown, under the Dark Mode tab.
5. Then from the Global Color tab, you have to set the dark mode colors for your selected Elementor global colors.
By default, you’ll find four repeater items same as available in the System Colors section of the Elementor Global Color options.
- The first repeater item will be the dark mode color of the primary color in the Elementor’s System Colors section.
- For instance, if we set the first repeater item color to black, it will replace the primary color in the dark mode.
- The second repeater item will be the dark mode color of the secondary color in the Elementor’s System Colors section.
- The third repeater item will be the dark mode color of the text color in the Elementor’s System Colors section.
- The fourth repeater item will be the dark mode color of the accent color in the Elementor’s System Colors section.
Here the dark mode colors will be set based on the item sequence.
This way, any item placed at first will replace the primary color, second item will replace the secondary color and so on.
6. Open the first item, here you can change the item label from the Label field and in the Color section, you have to set the dark mode color.
Similarly, you have to add dark mode colors in the remaining repeater items.
You can click on the + Add Item button to add more colors if you’ve added any custom colors in the Elementor Global Color options.
Note: Make sure to maintain the same sequence for dark mode global colors and normal global colors. You might get unexpected results in dark mode if there is any mismatch in the sequence.
Now your dark mode color will be set based on the item sequence and their respective colors.
