Nightfly 327e6ec58e cleanup | před 4 roky | |
---|---|---|
.. | ||
.github | před 4 roky | |
lib | před 4 roky | |
src | před 4 roky | |
test | před 4 roky | |
.babelrc | před 4 roky | |
.editorconfig | před 4 roky | |
.eslintrc | před 4 roky | |
.gitignore | před 4 roky | |
.nvmrc | před 4 roky | |
.travis.yml | před 4 roky | |
CHANGELOG.md | před 4 roky | |
LICENSE | před 4 roky | |
README.md | před 4 roky | |
package.json | před 4 roky | |
webpack.config.js | před 4 roky |
🌓 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/
prefers-color-scheme
)Check out the demo in these websites:
If you are using Wordpress you may want to have a look at these plugins based on 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/darkmode-js@1.5.6/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: ''
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
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 styledarkmode-ignore
where you don't want to apply darkmodeisolation: isolate;
in your CSS, this will also ignore the darkmode.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:
yarn build
or npm run build
- produces a production version of your library under the lib
folderyarn dev
or npm run dev
- produces development version of your library and runs a watcheryarn test
or npm run test
- it runs the tests :)yarn test:watch
or npm run test:watch
- same as above but in a watch modePlease ⭐️ this repository if this project helped you!
If you like this project, feel free to donate: