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> 

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'
  saveInCookies: false, // default: true,
  label: '?', // default: ''
  autoMatchOsTheme: true // default: true
}
 
const darkmode = new Darkmode(options);
darkmode.showWidget();

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.

.darkmode—activated p {
color:green;
}

Will make all your font green when dark mode is on (don’t do that, it would look terrible).

.darkmode-ignore on any element will ignore any styling when dark mode is on.
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).

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Abra
Abra
4 months 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.
Close
🇺🇸 English
Save posts, access exclusive content, join members-only communities and more.
Dark Mode Toggle
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram