5/5

How To Add Dark Mode To Your Elementor Powered Site.

Greetings All,

This question has been asked quite a bit in the Elementor Facebook group so I decided to see how hard it would be to implement it in one of test sites.

My first attempt was using jQuery and a button that would swap in and out certain classes on click targeting paragraphs and headings. It work great except you had to apply again if you switch pages there was no way to have it remember what the visitor had selected previously.

So I went back to fishing through the web and I found something that looked promising.

DarkMode.js

This javascript plugin was a gem to find. Create by Sandoche Adittane this plugin did everything I needed it to do from a developers stand point. This library uses the CSS mix-blend-mode to bring Dark Mode to your website. You can also use it without the widget programmatically. The plugin is lightweight, built-in Vanilla. It also uses local storage by default, so your last setting will be remembered!

You can find Darkmode.js here.

Awesomeness!!!

And to top it off there is even a WordPress version for those who are not so tech savvy. The options are limited but you get the same effect with having to do any serious work. You can find the WordPress version here Blackout.

I personally prefer to implement the plugin via javascript it gives me more control.

For those who want to implement this plugin the javascript way a user did a video with step by step instructions.

My Test Site Results

For my test I simply import a template from Envato elements and activated the plugin you can see my result below.

Let me know in the comments what you think.

😀

By Aires Dagraca

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Related Articles

Simple Darkmode with CSS & jQuery

This article aims to provide a simple solution to adding darkmode to your Elementor powered site by using CSS & jQuery. You don’t necessarily need to have pro for this to work but you will need an additional plugin to…

How To Turn A Section Into A Carousel

Greeting All, In this tutorial I am going to show you how you can turn a one column section in a carousel slider you can be proud of. Here is what you will be creating. Responsive and functional carousel. There…

How to Make A Horizontal Scrollable Mobile Menu

Greetings Everyone, This short tutorial will shed some light on how to replicate the mobile menu seen on Elementor website. See the image below to see what I am referring to. My working environment Theme: Hello Theme Elementor Version: Pro…

Leave a Reply

Your email address will not be published. Required fields are marked *

Become a Premium Member and get full access to exclusive courses and templates.

Key Elements provides a unique collection of tutorials, tips, & courses for Elementor Theme Builder. From advanced to basic tutorials we have something for everyone.
Share on facebook
Share on twitter
Share on linkedin
Account
  • Privacy Policy
  • Terms & Conditions
Pages
  • Articles
  • Resources
Important
  • About
  • Contact
Key Elements provides a unique collection of tutorials, tips, & courses for Elementor Theme Builder. From advanced to basic tutorials we have something for everyone.
Share on facebook
Share on twitter
Share on linkedin
Account
  • Privacy Policy
  • Terms & Conditions
Pages
  • Articles
  • Resources
Important
  • About
  • Contact
©2018 - 2020 Key Elements, All Rights Reserved
newsletter

Subscribe to get notified and receive a special invite.

Feedback
Powered by Elementor Pro

How happy are you with Key Elements?