๐ Add a Dark Mode / Night Mode to your website in a few seconds
This library uses the css mix-blend-mode
in order 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 localstorage 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/
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)
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>
new Darkmode().showWidget();
</script>
npm install darkmode-js
Then add the following JavaScript code:
import Darkmode from 'darkmode-js';
new Darkmode().showWidget();
Here are the option availables:
var 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: ''
}
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;
in order to provide the Dark Mode.
It may not be compatible with all the browsers.
Check the compatibility here: https://caniuse.com/#search=mix-blend-mode
yarn build
ornpm run build
- produces 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)