๐ Add a Dark Mode / Night Mode to your website in a few seconds
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 have been inspired by this article: https://dev.wgao19.cc/2019-05-04__sun-moon-blending-mode/
- 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 widget
Check out the demo in these websites:
- https://darkmodejs.learn.uno
- https://tradivegan.com (with custom label)
- https://what.toeat.in (with custom label)
- https://www.kanbanote.com (without the widget, once logged in)
- https://www.sandoche.com (with custom label)
- https://pilab.dev (without the widget, with a custom toggle button)
If you are using Wordpress you may want to have a look at these plugins based on Darkmode.js:
If you are using Nuxt.js there is a module for Darkmode.js:
Darkmode.js is very easy to use, just copy-paste the following code or use the npm package.
Just add this code to your HTML page:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/darkmode-js.min.js"></script>
<script>
function addDarkmodeWidget() {
new Darkmode().showWidget();
}
window.addEventListener('load', addDarkmodeWidget);
</script>
npm install darkmode-js
Then add the following JavaScript code:
import Darkmode from 'darkmode-js';
new Darkmode().showWidget();
Here are the option availables:
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();
If you don't want to show the widget and enable/disable Darkmode programatically you can use the method toggle()
. You can also check if the Dark Mode is activated with the method isActivated()
. See them in action in the following example:
const darkmode = new Darkmode();
darkmode.toggle();
console.log(darkmode.isActivated()) // will return true
- A CSS class
darkmode--activated
is added to the body tag when the darkmode is activated. You can take advantage of it to override the style and have a custom style - Use the class
darkmode-ignore
where you don't want to apply darkmode - You can also add this style:
isolation: isolate;
in your CSS, this will also ignore the darkmode. - It is also possible to revert the Dark Mode with this style
mix-blend-mode: difference;
.darkmode--activated p, .darkmode--activated li {
color: #000;
}
.button {
isolation: isolate;
}
.darkmode--activated .logo {
mix-blend-mode: difference;
}
<span class="darkmode-ignore">๐ฌ<span>
If it does not work you may have to add the following code, but this will invalidate the classes to override.
.darkmode-layer, .darkmode-toggle {
z-index: 500;
}
This library uses the CSS mix-blend-mode: difference;
to provide the Dark Mode.
It may not be compatible with all the browsers. Therefore the widget has been hidden in Internet Explorer and Edge.
This library also uses prefers-color-scheme: dark
to automatically enable the Dark Mode if the OS prefered theme is dark.
Check the compatibility here:
- https://caniuse.com/#search=mix-blend-mode
- https://caniuse.com/#search=prefers-color-scheme (to activate Dark Mode automatically)
yarn build
ornpm run build
- produces a production version of your library under thelib
folderyarn dev
ornpm run dev
- produces development version of your library and runs a watcheryarn test
ornpm run test
- it runs the tests :)yarn test:watch
ornpm run test:watch
- same as above but in a watch mode
Please โญ๏ธ this repository if this project helped you!
If you like this project, feel free to donate:
- PayPal: https://www.paypal.me/kanbanote
- Bitcoin: 19JiNZ1LkMaz57tewqJaTg2hQWH4RgW4Yp
- Ethereum: 0xded81fa4624e05339924355fe3504ba9587d5419
- Monero: 43jqzMquW2q989UKSrB2YbeffhmJhbYb2Yxu289bv7pLRh4xVgMKj5yTd52iL6x1dvCYs9ERg5biHYxMjGkpSTs6S2jMyJn
- Motive: MOTIV-25T5-SD65-V7LJ-BBWRD (Get Motive Now: https://motive.network)
Copyright (c) Sandoche Adittane