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

Published: 6 months ago

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

Join Our Newsletter
Here's what you get: A once a week newsletter that contains original content, aggregated posts, WordPress deals, and anything else we think you'd like. We don't spam or sell your email address. Unsub at any time.
Ezoicreport this ad
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
IsoGroup- Web Dev/Design, WordPress and More

Affiliate Disclosure: Some links on this website are affiliate links. We make commissions for purchases made through those links.

We only recommend items/tools that we've personally used and like.

Full Disclosure | FTC Statement

Join Our Newsletter
Over 4,000 Design Lovers and Problem Solvers.

Author

Ezoicreport this ad
A relationship driven website creation company.

Connect

© ISOTROPIC, LLC 2016-2021
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram