{"id":16492618,"url":"https://github.com/sandoche/nuxtjs-darkmode-js-module","last_synced_at":"2026-04-01T19:11:04.857Z","repository":{"id":56469110,"uuid":"307513013","full_name":"sandoche/nuxtjs-darkmode-js-module","owner":"sandoche","description":"🌓 Add darkmode / nightmode to your nuxt project in a few seconds","archived":false,"fork":false,"pushed_at":"2020-11-05T15:25:23.000Z","size":2558,"stargazers_count":59,"open_issues_count":0,"forks_count":8,"subscribers_count":2,"default_branch":"main","last_synced_at":"2026-02-23T06:24:39.534Z","etag":null,"topics":["dark","darkmode","darkmode-js","night-mode","nightmode","nuxt","nuxt-module","nuxtjs","nuxtjs-module","widget"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sandoche.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":null,"patreon":"sandoche","open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":"https://www.paypal.me/kanbanote"}},"created_at":"2020-10-26T21:49:24.000Z","updated_at":"2024-08-04T18:57:47.000Z","dependencies_parsed_at":"2022-08-15T19:20:33.867Z","dependency_job_id":null,"html_url":"https://github.com/sandoche/nuxtjs-darkmode-js-module","commit_stats":null,"previous_names":["sandoche/nuxt-darkmode-js-module"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/sandoche/nuxtjs-darkmode-js-module","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sandoche%2Fnuxtjs-darkmode-js-module","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sandoche%2Fnuxtjs-darkmode-js-module/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sandoche%2Fnuxtjs-darkmode-js-module/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sandoche%2Fnuxtjs-darkmode-js-module/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sandoche","download_url":"https://codeload.github.com/sandoche/nuxtjs-darkmode-js-module/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sandoche%2Fnuxtjs-darkmode-js-module/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31291098,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-01T13:12:26.723Z","status":"ssl_error","status_checked_at":"2026-04-01T13:12:25.102Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dark","darkmode","darkmode-js","night-mode","nightmode","nuxt","nuxt-module","nuxtjs","nuxtjs-module","widget"],"created_at":"2024-10-11T14:06:36.947Z","updated_at":"2026-04-01T19:11:04.824Z","avatar_url":"https://github.com/sandoche.png","language":"JavaScript","funding_links":["https://patreon.com/sandoche","https://www.paypal.me/kanbanote","https://www.patreon.com/sandoche"],"categories":["JavaScript"],"sub_categories":[],"readme":"# nuxtjs-darkmode-js-module\n\n[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![License][license-src]][license-href]\n[![Medium Badge](https://badgen.net/badge/icon/medium?icon=medium\u0026label)](https://medium.com/@sandoche)\n[![Twitter: sandochee](https://img.shields.io/twitter/follow/sandochee.svg?style=social)](https://twitter.com/sandochee)\n\n🌓 Add darkmode / nightmode to your Nuxt.js project in a few seconds\n\nThis library adds [Darkmode.js](https://github.com/sandoche/Darkmode.js) to Nuxt.js\n\n## 💡 Features\n\n- Widget appears automatically\n- Saving users choice\n- Automatically shows Darkmode if the OS preferred theme is dark\n- Can be used programmatically without widget (Darkmode instance accessible from Vue)\n- Can be installed as a Nuxt Module\n\n## ✨ Demo\n\nCheck out the demo in these websites:\n\n- https://undesign.learn.uno\n- https://curatedstacktemplate.learn.uno/\n\n## 📖 Setup\n\n1. Add `nuxtjs-darkmode-js-module` dependency to your project\n\n```bash\nyarn add nuxtjs-darkmode-js-module # or npm install nuxtjs-darkmode-js-module\n```\n\n2. Add `nuxtjs-darkmode-js-module` to the `modules` section of `nuxt.config.js`\n\n```js\n{\n  modules: [\n    // Simple usage\n    'nuxtjs-darkmode-js-module',\n\n    // With options\n    ['nuxtjs-darkmode-js-module', { /* module options - check below */ }]\n  ]\n\n  // or use options likes this,\n  darkmodejs: {\n    bottom: '64px', // default: '32px'\n    right: 'unset', // default: '32px'\n    left: '32px', // default: 'unset'\n    time: '0.5s', // default: '0.3s'\n    mixColor: '#fff', // default: '#fff'\n    backgroundColor: '#fff',  // default: '#fff'\n    buttonColorDark: '#100f2c',  // default: '#100f2c'\n    buttonColorLight: '#fff', // default: '#fff'\n    saveInCookies: false, // default: true,\n    label: '🌓', // default: ''\n    autoMatchOsTheme: true, // default: true\n    disableWidget: false // default: false\n  }\n}\n```\n\n## ▶️ Methods\nIf 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:\n```javascript\n// in a vue instance check example in example/pages/index.vue\nthis.darkmode.toggle() // this will work well only if `disableWidget: true` in the options\n\n// caution the following method is not reactive\nconsole.log(this.darkmode.isActivated())\n```\n\n## 💄 Override style\n* 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\n* Use the class `darkmode-ignore` where you don't want to apply darkmode\n* You can also add this style: `isolation: isolate;` in your CSS, this will also ignore the darkmode.\n* It is also possible to revert the Dark Mode with this style `mix-blend-mode: difference;`\n\n### Examples\n```css\n.darkmode--activated p, .darkmode--activated li {\n  color: #000;\n}\n\n.button {\n  isolation: isolate;\n}\n\n.darkmode--activated .logo {\n  mix-blend-mode: difference;\n}\n```\n```html\n\u003cspan class=\"darkmode-ignore\"\u003e😬\u003cspan\u003e\n```\n\n## 🐛 Debug\nIf it does not work you may have to add the following code, but this will invalidate the classes to override.\n```css\n.darkmode-layer, .darkmode-toggle {\n  z-index: 500;\n}\n```\n\n## 🚸 Browser compatibility\nThis library uses the CSS `mix-blend-mode: difference;` to provide the Dark Mode.\nIt may not be compatible with all the browsers. Therefore the widget has been hidden in Internet Explorer and Edge.\nThis library also uses `prefers-color-scheme: dark` to automatically enable the Dark Mode if the OS prefered theme is dark.\n\nCheck the compatibility here: \n- https://caniuse.com/#search=mix-blend-mode\n- https://caniuse.com/#search=prefers-color-scheme (to activate Dark Mode automatically)\n\n## ⚙️ Development\n\n1. Clone this repository\n2. Install dependencies using `yarn install` or `npm install`\n3. Start development server using `npm run dev`\n\n## 🤝 Contributing\n\nContributions, issues and feature requests are welcome!\n\n## ⭐️ Show your support\n\nPlease ⭐️ this repository if this project helped you!\n\n\u003ca href=\"https://www.patreon.com/sandoche\"\u003e[![patreon.png](https://c5.patreon.com/external/logo/become_a_patron_button.png)](https://www.patreon.com/sandoche)\u003c/a\u003e\n\n## 🍺 Buy me a beer\n\nIf you like this project, feel free to donate:\n\n- PayPal: https://www.paypal.me/kanbanote\n- Bitcoin: 19JiNZ1LkMaz57tewqJaTg2hQWH4RgW4Yp\n- Ethereum: 0xded81fa4624e05339924355fe3504ba9587d5419\n- Monero: 43jqzMquW2q989UKSrB2YbeffhmJhbYb2Yxu289bv7pLRh4xVgMKj5yTd52iL6x1dvCYs9ERg5biHYxMjGkpSTs6S2jMyJn\n- Motive: MOTIV-25T5-SD65-V7LJ-BBWRD (Get Motive Now: https://motive.network)\n\n## 📄 License\n\n[MIT License](./LICENSE)\n\nCopyright (c) Sandoche Adittane\n\n\u003c!-- Badges --\u003e\n\n[npm-version-src]: https://img.shields.io/npm/v/nuxtjs-darkmode-js-module/latest.svg\n[npm-version-href]: https://npmjs.com/package/nuxtjs-darkmode-js-module\n[npm-downloads-src]: https://img.shields.io/npm/dt/nuxtjs-darkmode-js-module.svg\n[npm-downloads-href]: https://npmjs.com/package/nuxtjs-darkmode-js-module\n[license-src]: https://img.shields.io/npm/l/nuxtjs-darkmode-js-module.svg\n[license-href]: ./LICENSE\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsandoche%2Fnuxtjs-darkmode-js-module","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsandoche%2Fnuxtjs-darkmode-js-module","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsandoche%2Fnuxtjs-darkmode-js-module/lists"}