nuxtjs-darkmode-js-module

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
![Medium Badge](https://medium.com/@sandoche)
![Twitter: sandochee](https://twitter.com/sandochee)

🌓 Add darkmode / nightmode to your Nuxt.js project in a few seconds

This library adds Darkmode.js to Nuxt.js

💡 Features

- Widget appears automatically
- Saving users choice
- Automatically shows Darkmode if the OS preferred theme is dark
- Can be used programmatically without widget (Darkmode instance accessible from Vue)
- Can be installed as a Nuxt Module

✨ Demo

Check out the demo in these websites:

- https://undesign.learn.uno
- https://curatedstacktemplate.learn.uno/

📖 Setup

1. Add nuxtjs-darkmode-js-module dependency to your project

``bash yarn add nuxtjs-darkmode-js-module # or npm install nuxtjs-darkmode-js-module`

2. Add nuxtjs-darkmode-js-module to the modules section of nuxt.config.js

`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 } }`

`▶️ Methods`


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:

javascript
// 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())`

`💄 Override style`


* 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;

$3

css
.darkmode--activated p, .darkmode--activated li {
  color: #000;
}
.button {
  isolation: isolate;
}

.darkmode--activated .logo { mix-blend-mode: difference; }``html 😬`

`🐛 Debug`


If it does not work you may have to add the following code, but this will invalidate the classes to override.

css
.darkmode-layer, .darkmode-toggle {
  z-index: 500;
}


🚸 Browser compatibility

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)
⚙️ Development

1. Clone this repository 2. Install dependencies usingyarn install or npm install3. Start development server usingnpm run dev`

🤝 Contributing

Contributions, issues and feature requests are welcome!

⭐️ Show your support

Please ⭐️ this repository if this project helped you!

![patreon.png](https://www.patreon.com/sandoche)

🍺 Buy me a beer

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)

📄 License

MIT License

[npm-version-src]: https://img.shields.io/npm/v/nuxtjs-darkmode-js-module/latest.svg
[npm-version-href]: https://npmjs.com/package/nuxtjs-darkmode-js-module
[npm-downloads-src]: https://img.shields.io/npm/dt/nuxtjs-darkmode-js-module.svg
[npm-downloads-href]: https://npmjs.com/package/nuxtjs-darkmode-js-module
[license-src]: https://img.shields.io/npm/l/nuxtjs-darkmode-js-module.svg
[license-href]: https://npmjs.com/package/nuxtjs-darkmode-js-module

nuxtjs-darkmode-js-module

🌓 Add darkmode / nightmode to your Nuxt.js project in a few seconds

This library adds Darkmode.js to Nuxt.js

💡 Features

✨ Demo

Check out the demo in these websites:

- https://undesign.learn.uno
- https://curatedstacktemplate.learn.uno/

📖 Setup

1. Add nuxtjs-darkmode-js-module dependency to your project

``bash yarn add nuxtjs-darkmode-js-module # or npm install nuxtjs-darkmode-js-module`

2. Add nuxtjs-darkmode-js-module to the modules section of nuxt.config.js

`js { modules: [ // Simple usage 'nuxtjs-darkmode-js-module',

// With options ['nuxtjs-darkmode-js-module', { / module options - check below / }] ]

`▶️ Methods`


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:

javascript
// 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())`

`💄 Override style`


* 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;

$3

css
.darkmode--activated p, .darkmode--activated li {
  color: #000;
}
.button {
  isolation: isolate;
}

.darkmode--activated .logo { mix-blend-mode: difference; }``html 😬`

`🐛 Debug`


If it does not work you may have to add the following code, but this will invalidate the classes to override.

css
.darkmode-layer, .darkmode-toggle {
  z-index: 500;
}


🚸 Browser compatibility

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)
⚙️ Development

1. Clone this repository 2. Install dependencies usingyarn install or npm install3. Start development server usingnpm run dev`

🤝 Contributing

Contributions, issues and feature requests are welcome!

⭐️ Show your support

Please ⭐️ this repository if this project helped you!

![patreon.png](https://www.patreon.com/sandoche)

🍺 Buy me a beer

If you like this project, feel free to donate:

📄 License

MIT License