Easy Elementor Dark Mode with Droit Dark Mode

Easy Elementor Dark Mode with Droit Dark Mode

Just launched! Checkout the CSS Course for Elementor users.

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:

  1. Image switch: select a 'dark' mode version of any image
  2. Checks user device preference, shows the right mode accordingly
  3. Logs users preference for future visits
  4. Exclusion list by CSS selectors
  5. Lightweight at 4kb total of files loaded
  6. Mostly automatic

What should be improved:

  1. Images that are in excluded section, should be excluded from switching (very important)
  2. Inline SVG styling (color) should be included (very important)
  3. Shape dividers should be included
  4. Transition should be improved
  5. Remove 'get pro' if Pro is installed and activated
  6. Custom backend colors seems broken (Can't choose the colors anywhere)
  7. 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.

Looking for something else? Search across 2445 Elements right here:

Checkout the Elementor Addon Finder directly

Comments

3 Responses

  1. 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.

    1. 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
      }

  2. 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?

Leave a Reply

BRAND NEW

CSS Course For Elementor Users

Become a CSS ninja and design exciting, quality websites that stand out in the crowd.