isotropic-2022
Share
Blog
Search
Menu

How To Add Darkmode To Any Website (Copy/Paste Darkmode.JS)

By James LePage
 on December 17, 2020
Last modified on January 6th, 2022

How To Add Darkmode To Any Website (Copy/Paste Darkmode.JS)

By James LePage
 on December 17, 2020
Last modified on January 6th, 2022

This guide shows you how to add dark mode to any website by copying and pasting Darkmode.JS in, and configuring a few options. You don’t need to know code, the options are easy to understand, and you’ll have your very own dark mode / night mode on your website in minutes.

This works on literally any platform, but for this example, we’ll be using a WordPress (Oxygen Builder) website. All concepts discussed here can be used on any site ever built.

What We’re Using To Add Dark Mode To Website

We’re going to be using a free, lightweight library called Darkmode.JS. It uses the css mix-blend-mode in order to bring Dark-mode to any website, uses localstorage for user preference remembrance, and is built with Vanilla JS. Unpacked, it weighs 69.7 kB.

https://darkmodejs.learn.uno

It comes with a default toggle, but you can easily disable this and use your own button/text. Darkmode.JS also supports prefers-color-scheme, which modern browsers use to set the default “dark/light” scheme. For example, after 8pm, iOS will typically prefer a dark color scheme on a website.

How To Use Darkmode.JS

Adding dark mode to any website is easy with Darkmode.js. Simply copy and paste the following code directly into your website:

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script> <script>   function addDarkmodeWidget({     new Darkmode().showWidget();   }   window.addEventListener('load', addDarkmodeWidget); </script> 
Code language: HTML, XML (xml)

On most sites, you’ll want to add all of this to the < head > section. Also, the script is so basic and small, that self hosting it will remove a third party connection when loading your site, and result in a speed boost.

On WordPress (Oxygen Builder), use Advanced Scripts or Code Snippets to insert this in to the header of your website.

On other CMSs, manually add the code.

This tiny library also comes with many options that you can use to customize the dark mode toggle and theme. The main things that you can change is the mixColor, button label and ability to auto match the theme that the browser call. With these options, everything is pretty self explanatory.

const options = {   bottom'64px'// default: '32px'   right'unset'// default: '32px'   left'32px'// default: 'unset'   time'0.5s'// default: '0.3s'   mixColor'#fff'// default: '#fff'   backgroundColor'#fff',  // default: '#fff'   buttonColorDark'#100f2c',  // default: '#100f2c'   buttonColorLight'#fff'// default: '#fff'   saveInCookiesfalse// default: true,   label'?'// default: ''   autoMatchOsThemetrue // default: true }   const darkmode = new Darkmode(options); darkmode.showWidget();
Code language: JavaScript (javascript)

Fine Tuning Your Darkmode Effect

Because this essentially blanket inverses the colors on your website, you’ll probably need to exclude some things from the effect (or make them look/color differently when Darkmode is toggled on your website). This library lets you do this relatively easily with CSS classes.

There are two classes to override or disable the styling, and one css class that completely ignore dark mode.

.darkmode--activated This class is used when Darkmode is on. That means you can specify and fine tune dark mode styles. .darkmodeactivated p { color:green; } Will make all your font green when dark mode is on (dont do that, it would look terrible). .darkmode-ignore on any element will ignore any styling when dark mode is on.
Code language: CSS (css)
isolation: isolate; This property will ignore dark mode.

Darkmode.JS Demo

If you didn’t already notice, there’s a dark mode toggle for this blog post (which only shows on this post). That’s because we’ve initialized Darkmode.js on this page to give you a good idea of how it works. No additional styling was done, we simply installed the script and called it, so there may be some things that look odd.

Conclusion

If you want to add a simple dark mode to your website in 3 seconds, this is the library to use. If you want a bit more control, click here for more Dark Mode tutorials, specifically how to use a free plugin on WordPress to implement dark mode with custom CSS styles (this method offers more control, but a lot more work and weight).

isogroup-cover
Join The IsoGroup
A vibrant Facebook Group to talk about web design and the business of agency. Daily curated resources and conversations.
oxygen-course-isotropic
Oxygen Builder Course - Coming Soon
The Oxygen Builder Mastery course will bring you from beginner to professional - ACF, MetaBox & WooCommerce modules included.
Get Launch Notification & Discount
bricks-builder-course
Bricks Builder Course - Coming Soon
The Bricks Builder Mastery course will bring you up to speed on this popular builder.
Get Launch Notification & Discount
Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Abra
Abra
1 year ago

Awesome!

Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!
We're looking for new authors. Explore Isotropic Jobs.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram