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.
<script> /* Please login to get the code * The code will be for the Easy Elementor Dark Mode with Droit Dark Mode tutorial * Found at this URL https://element.how/elementor-dark-mode/ */ </script>
Elementor dark mode CSS for shape dividers
Ditto, for shape dividers.
<script> /* Please login to get the code * The code will be for the Easy Elementor Dark Mode with Droit Dark Mode tutorial * Found at this URL https://element.how/elementor-dark-mode/ */ </script>
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.
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?