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'
  saveInCookies: false, // default: true,
  label: '?', // default: ''
  autoMatchOsTheme: true // 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.

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