Table of Contents
In this review, we are going to have a look at Droit Dark Mode, to add dark mode to our Elementor websites.
Droit Dark Mode is currently on sale at AppSumo for $35 (10 sites) or $70 (unlimited sites).
Check the video for the complete overview! Below are the cliff notes.
Great features of Droit Dark Mode:
- Image switch: select a 'dark' mode version of any image
- Checks user device preference, shows the right mode accordingly
- Logs users preference for future visits
- Exclusion list by CSS selectors
- Lightweight at 4kb total of files loaded
- Mostly automatic
What should be improved:
- Images that are in excluded section, should be excluded from switching (very important)
- Inline SVG styling (color) should be included (very important)
- Shape dividers should be included
- Transition should be improved
- Remove 'get pro' if Pro is installed and activated
- Custom backend colors seems broken (Can't choose the colors anywhere)
- Thumbnail images support for switching image feature
Elementor dark mode CSS for inline SVGs
Until Droit Dark Mode addon adds support, here is the CSS required to change the color of inline SVGs when dark mode is active.
/* Dark mode active, color of inline SVGs (like icons) */
.drdt-dark-mode svg, .drdt-dark-mode path {
fill: #fff!important;
}
Elementor dark mode CSS for shape dividers
Ditto, for shape dividers.
/* Dark mode active, color of shape dividers */
.drdt-dark-mode .elementor-shape svg, .drdt-dark-mode .elementor-shape path {
fill: #000!important;
}
Conclusion
Droit Dark Mode is a great option for easy to use, lightweight and well coded dark mode for Elementor and WordPress in general. It works on any WordPress website and is not dependant on Elementor.
It's definitely the greatest dark mode I tested so far, better than the competition I have seen. It still has shortcomings, however it recently launched so I'm confident these will be fixed soon, and we will be left with an awesome, mostly automatized Elementor dark mode solution.
Element.how also provides premium tutorials showing awesome advanced designs, check them out here.
And get exclusive Elementor related discounts here
Checkout the Elementor Addon Finder directly
3 Responses
I've found it impossible to target individual elements - the background colors of buttons are lost in Dark Mode. And the developers have not responded to my support request. Might be a great plugin in the long term but their support system doesn't work right now.
Targeting elements should be straightforward... you use their class they add to the html element, and then go down from there.
Example use case for under the Advanced > custom CSS :
.drdt-dark-mode selector {
// css here
}
For the button element this should work:
.drdt-dark-mode selector a{
// css here
}
I can't get this to work, I'm not sure why.
This is my rule:
.drdt-dark-mode .header-1 {
background-color: #fff!important;
}
But it's overruled by:
html.drdt-dark-mode :not(.drdt-ignore-dark):not(.drdt_checkbox):not(.droit_dark):not(.droit_light):not(.dark_switch_box):not(img):not(option):not(input):not(select):not(textarea):not(mark):not(code):not(pre):not(ins):not(button):not(a):not(video):not(canvas):not(progress):not(iframe):not(svg):not(path):not(.mejs-iframe-overlay):not(.mejs-iframe-overlay):not(.elementor-element-overlay):not(.elementor-background-overlay):not(i):not(button *):not(a *) {
background-color: var(--drdt-color-bg) !important;
}
I've tried to make my rule more specific but not luck. Any ideas?