npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

Iโ€™ve always been into building performant and accessible sites, but lately Iโ€™ve been taking it extremely seriously. So much so that Iโ€™ve been building a tool to help me optimize and monitor the sites that I build to make sure that Iโ€™m making an attempt to offer the best experience to those who visit them. If youโ€™re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, ๐Ÿ‘‹, Iโ€™m Ryan Hefnerย  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If youโ€™re interested in other things Iโ€™m working on, follow me on Twitter or check out the open source projects Iโ€™ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soonโ€“ish.

Open Software & Tools

This site wouldnโ€™t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you ๐Ÿ™

ยฉ 2024 โ€“ย Pkg Stats / Ryan Hefner

nuxtjs-darkmode-js-module

v1.0.3

Published

๐ŸŒ“ Add darkmode / nightmode to your Nuxt.js project in a few seconds

Downloads

50

Readme

nuxtjs-darkmode-js-module

npm version npm downloads License Medium Badge Twitter: 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
yarn add nuxtjs-darkmode-js-module # or npm install nuxtjs-darkmode-js-module
  1. Add 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
  }
}

โ–ถ๏ธ 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:

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

Examples

.darkmode--activated p, .darkmode--activated li {
  color: #000;
}

.button {
  isolation: isolate;
}

.darkmode--activated .logo {
  mix-blend-mode: difference;
}
<span class="darkmode-ignore">๐Ÿ˜ฌ<span>

๐Ÿ› Debug

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

๐Ÿšธ 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 using yarn install or npm install
  3. Start development server using npm run dev

๐Ÿค Contributing

Contributions, issues and feature requests are welcome!

โญ๏ธ Show your support

Please โญ๏ธ this repository if this project helped you!

patreon.png

๐Ÿบ 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

Copyright (c) Sandoche Adittane