🌓 Add darkmode / nightmode to your nuxt project in a few seconds
🌓 Add darkmode / nightmode to your Nuxt.js project in a few seconds
This library adds Darkmode.js to Nuxt.js
Check out the demo in these websites:
nuxtjs-darkmode-js-module
dependency to your projectyarn add nuxtjs-darkmode-js-module # or npm install nuxtjs-darkmode-js-module
nuxtjs-darkmode-js-module
to the modules
section of nuxt.config.js
{
modules: [
// Simple usage
'nuxtjs-darkmode-js-module',
// With options
['nuxtjs-darkmode-js-module', { /* module options - check below */ }]
]
// or use options likes this,
darkmodejs: {
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
disableWidget: false // default: false
}
}
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:
// in a vue instance check example in example/pages/index.vue
this.darkmode.toggle() // this will work well only if `disableWidget: true` in the options
// caution the following method is not reactive
console.log(this.darkmode.isActivated())
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 install
or npm install
npm run dev
Contributions, issues and feature requests are welcome!
Please ⭐️ this repository if this project helped you!
If you like this project, feel free to donate:
Copyright (c) Sandoche Adittane