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