Nowadays people really like dark mode on any website, I personally prefer any website in dark mode. 🌓

Implementing dark mode can be a little time taking for your website. But you can use several NPM packages available there that will make the developer's life a lot easier.

This library uses the CSS mix-blend-mode to bring Dark Mode to any of your websites. Just copy-paste the snippet and you will get a widget to turn on and off the Dark Mode. 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! I prefer darkmode.js

You can also customize this package according to your needs.

Here are few features of this package

• Widget appears automatically
• Saving users choice
• Automatically shows Darkmode if the OS preferred theme is dark (if the browsers support prefers-color-scheme)

• Can be used programmatically without a widget

  darkmode.js

There are 2 ways to add this package.

🚀 Easy way (using the JSDelivr CDN)

Just add this code to your HTML page:

function addDarkmodeWidget() {

new Darkmode().showWidget();

}

window.addEventListener('load', addDarkmodeWidget);

📦Using NPM

npm install darkmode-js

Then add the following JavaScript code:

import Darkmode from 'darkmode-js';

new Darkmode().showWidget();

Here's how you can customize this package

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();