{"_id":"@cxy227/dark-mode-js","_rev":"9-1cf50d0ed38a3acbe469ab213ebe9c3f","time":{"0.0.3":"2021-10-20T01:58:52.528Z","0.0.4":"2021-10-20T01:58:52.528Z","created":"2021-10-21T08:50:29.939Z","0.0.5":"2021-10-21T08:50:30.163Z","modified":"2022-04-05T02:23:33.985Z","0.1.0":"2021-10-21T09:22:21.772Z","0.1.1":"2021-10-21T10:02:07.428Z","0.1.2":"2021-10-21T10:22:49.085Z","0.2.1":"2021-10-21T10:51:23.948Z"},"name":"@cxy227/dark-mode-js","dist-tags":{"latest":"0.2.1"},"versions":{"0.0.5":{"name":"@cxy227/dark-mode-js","version":"0.0.5","description":"Add dark mode to your website quickly","main":"dist/index.js","keywords":["darkmode","dark","nightmode","night","dark-mode","night-mode","darktheme","dark-theme"],"scripts":{"dev":"rollup -c -w","build":"rollup -c","release":"standard-version","add":"git add . && git commit -m 'update'","push":"npm run add && git push github master && git push gitee master","prepublish":"npm run release && npm run build","test":"echo \"Error: no test specified\" && exit 1"},"author":{"name":"beth"},"license":"MIT","devDependencies":{"@babel/core":"^7.15.8","@babel/preset-env":"^7.15.8","rollup":"^2.58.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-node-resolve":"^5.2.0","standard-version":"^9.3.2","us-utils-asyncloadscript":"^1.1.3"},"gitHead":"ff13d23ae1c90d13a8665e991d088b2f35469fb4","_id":"@cxy227/dark-mode-js@0.0.5","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"cxy227","email":"gemeiwangji789@outlook.com"},"dist":{"integrity":"sha512-mw7VlB0yfkqN2A4erwsP8lDCattGJf/VcjQknO3WQ3NCXTo/MEJRreLyH7Ki5OPUjjrtRR9Clj6nMVUI6zZJIQ==","shasum":"028e872c799241d96d16274cb4f7bbe1e1863e1d","tarball":"https://registry.npmjs.org/@cxy227/dark-mode-js/-/dark-mode-js-0.0.5.tgz","fileCount":5,"unpackedSize":21763,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB+dm5HWTTRUvDNrdaL6fwzZePXAazgoldANLO/nkTuNAiB6v/U2/bTO7aW/eGB8BNLNFEROSdUkJIEPHW6TjdkNiQ=="}]},"directories":{},"maintainers":[{"name":"cxy227","email":"gemeiwangji789@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/dark-mode-js_0.0.5_1634806229990_0.1273670238211284"},"_hasShrinkwrap":false},"0.1.0":{"name":"@cxy227/dark-mode-js","version":"0.1.0","description":"Add dark mode to your website quickly","main":"dist/index.js","keywords":["darkmode","dark","nightmode","night","dark-mode","night-mode","darktheme","dark-theme"],"scripts":{"dev":"rollup -c -w","build":"rollup -c","release":"standard-version","add":"git add . && git commit -m 'update'","push":"git push github master && git push gitee master","prepublish":"npm run build","test":"echo \"Error: no test specified\" && exit 1"},"author":{"name":"beth"},"license":"MIT","devDependencies":{"@babel/core":"^7.15.8","@babel/preset-env":"^7.15.8","rollup":"^2.58.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-node-resolve":"^5.2.0","standard-version":"^9.3.2","us-utils-asyncloadscript":"^1.1.3"},"gitHead":"8bb2e9134ed1d660003b876629a060425127f682","_id":"@cxy227/dark-mode-js@0.1.0","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"cxy227","email":"gemeiwangji789@outlook.com"},"dist":{"integrity":"sha512-kaM6yLAd6fyb2vOcD+vvpb0e09EI+0p5QH2VChYqfGDyRuMtm4o5axU2PcvV6UYh3adXcjyOmSs7JR8jd1AXTA==","shasum":"05f8e0981c95b99b6d1480b68870a34dd507aa0b","tarball":"https://registry.npmjs.org/@cxy227/dark-mode-js/-/dark-mode-js-0.1.0.tgz","fileCount":9,"unpackedSize":49420,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBJGwe0Rf4NOBCbyYj5q4a376BK77k7wil1kV/iNfE7LAiA05KXu5qQkxxrSJ/o/CRNSRXhRUjv4yeAJeVcGNucV1g=="}]},"directories":{},"maintainers":[{"name":"cxy227","email":"gemeiwangji789@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/dark-mode-js_0.1.0_1634808141615_0.04778954738250918"},"_hasShrinkwrap":false},"0.1.1":{"name":"@cxy227/dark-mode-js","version":"0.1.1","description":"Add dark mode to your website quickly","main":"dist/index.js","keywords":["darkmode","dark","nightmode","night","dark-mode","night-mode","darktheme","dark-theme"],"scripts":{"dev":"rollup -c -w","build":"rollup -c","release":"standard-version","add":"git add . && git commit -m 'update'","push":"git push github master && git push gitee master","prepublish":"npm run release && npm run build","test":"echo \"Error: no test specified\" && exit 1"},"author":{"name":"beth"},"license":"MIT","devDependencies":{"@babel/core":"^7.15.8","@babel/preset-env":"^7.15.8","rollup":"^2.58.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-node-resolve":"^5.2.0","standard-version":"^9.3.2","us-utils-asyncloadscript":"^1.1.3"},"gitHead":"d58053660dd50af4c6198b70fd5c50ded8f10659","_id":"@cxy227/dark-mode-js@0.1.1","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"cxy227","email":"gemeiwangji789@outlook.com"},"dist":{"integrity":"sha512-okYFd/djguz0ZZHFANBmZ40YyD/0Ij6Y0FjyA7oDCwQMxw8++UC2laOB6G8ZpdX+ggGtPnQBZrSs7SMiArSXvQ==","shasum":"d1139897248350e7ed42839c01fa39d446e4295a","tarball":"https://registry.npmjs.org/@cxy227/dark-mode-js/-/dark-mode-js-0.1.1.tgz","fileCount":9,"unpackedSize":49677,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGT+tVPEbj7v0tfmceH38rq4worXkq5tpZXGmnn6OsDRAiAqQnhztypuvjj+4W/FGCt7iN3GIgbc99cCwcw7+6Hp0A=="}]},"directories":{},"maintainers":[{"name":"cxy227","email":"gemeiwangji789@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/dark-mode-js_0.1.1_1634810527068_0.5894609066340699"},"_hasShrinkwrap":false},"0.1.2":{"name":"@cxy227/dark-mode-js","version":"0.1.2","description":"Add dark mode to your website quickly","main":"dist/index.js","keywords":["darkmode","dark","nightmode","night","dark-mode","night-mode","darktheme","dark-theme"],"scripts":{"dev":"rollup -c -w","build":"rollup -c","release":"standard-version","add":"git add . && git commit -m 'update'","push":"git push github master && git push gitee master","prepublish":"npm run release && npm run build","test":"echo \"Error: no test specified\" && exit 1"},"author":{"name":"beth"},"license":"MIT","devDependencies":{"@babel/core":"^7.15.8","@babel/preset-env":"^7.15.8","rollup":"^2.58.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-node-resolve":"^5.2.0","standard-version":"^9.3.2","us-utils-asyncloadscript":"^1.1.3"},"gitHead":"11b6033bee0b64862724f40c4d6de027abf9a686","_id":"@cxy227/dark-mode-js@0.1.2","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"cxy227","email":"gemeiwangji789@outlook.com"},"dist":{"integrity":"sha512-Vk3hfhKjUojwceOten1d/BfBrXPasNga3m4iMWchmEa8c53gqrOy+/aWc26uj/Atf4mrvQDv4OKs6QTjqYN1Dg==","shasum":"87ecd554a9edc693153bf59811c7307a14fc8a10","tarball":"https://registry.npmjs.org/@cxy227/dark-mode-js/-/dark-mode-js-0.1.2.tgz","fileCount":10,"unpackedSize":51303,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC3vs10v/9l00sRNswQxThNFEpM2q22/3Fppnj3j5qH6wIhAN60k5/IhYox8CgPcyqvK1gTeLDbIsaIYiQ6tdu/RorF"}]},"directories":{},"maintainers":[{"name":"cxy227","email":"gemeiwangji789@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/dark-mode-js_0.1.2_1634811768775_0.6889606619112512"},"_hasShrinkwrap":false},"0.2.1":{"name":"@cxy227/dark-mode-js","version":"0.2.1","description":"Add dark mode to your website quickly","main":"dist/index.js","keywords":["darkmode","dark","nightmode","night","dark-mode","night-mode","darktheme","dark-theme"],"scripts":{"dev":"rollup -c -w","build":"rollup -c","release":"standard-version","add":"git add . && git commit -m 'update'","push":"git push github master && git push gitee master","prepublish":"npm run release && npm run build","test":"echo \"Error: no test specified\" && exit 1"},"author":{"name":"beth"},"license":"MIT","devDependencies":{"@babel/core":"^7.15.8","@babel/preset-env":"^7.15.8","rollup":"^2.58.0","rollup-plugin-babel":"^4.4.0","rollup-plugin-node-resolve":"^5.2.0","standard-version":"^9.3.2","us-utils-asyncloadscript":"^1.1.3"},"gitHead":"8d8b2af5179013aa68cb05bc219bddd3cfc23f52","_id":"@cxy227/dark-mode-js@0.2.1","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"cxy227","email":"gemeiwangji789@outlook.com"},"dist":{"integrity":"sha512-FQ/x10326P8x2SJQGF+PvXgBcR/2k8UZXavscHjbZl5rPi8avCYFoBIcLF9v6nZMSqUkOt1q1uzBsOujdKKbzw==","shasum":"aebe5d775845a9623c16f35902af93793b1f82ff","tarball":"https://registry.npmjs.org/@cxy227/dark-mode-js/-/dark-mode-js-0.2.1.tgz","fileCount":11,"unpackedSize":59226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2DpWCRA9TVsSAnZWagAApOcQAKAOtPg2lht3v8I8OnFp\nkbWlngbXLJZVtLnYQMWm9DzbQIeI26Hwys53hIBTLKyAJwk4F030EEezwRu1\nlQt6k6En+qY1Rbg19lRqE31eLTO2Mzf6xLgmbWyAsDiUtEpxkMVJm3yl4hC/\nLtcF5kL4wEXAvf8MKP1wATXsDsFDNh5LwUP9H5yq1f+BR9YGESudaikwibWQ\nlXbuZO1BnDAw8MtmdkO83oHFw6bKUsS84c/X9i6tOTpJEaVb8zM9jMPH0HM4\nPTe3cd87lhsJSXElzxeSnpXLDmt0GaTuIZeEON5TJJajzW8rnOGRN5FDt70K\nfCeLiq+R20K5xQdfMmexbY9kTChTjfU9A+HndgZmeF35zsCNo4Nq1DavoaE1\n7wrROwsYJrKJsxjy/oLHGc+/FjAnwApIANjm4ddKuosq+bUMDqLuffnH8gSJ\nJZas/EiE2VQVwHGg9Z7RB43dlGE60TBBm2/t4HXYwOXCcTFY68AVZVCNKkkE\nQyDTDttN9vWNFoSqD4/hEjMqxHXyk2Mv6F4XjkVSU5PPjKKSlofXdLZRLSD+\nnrfFJf5eW6iAr7FNig1uYAZJPQRXGPAExFeQhOYP2uepxwjJv8HYTAf6zdS+\nyR5deYA8lTfWRSRjtUfgD4tGi+gZQTrfNvJVTLdZj39yX8tR/dMgfYjJs0wb\nB4X5\r\n=BVkk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCFK1DoXc4TYXFmY0R17Ok8aZX5kCau8BSCnY/dflG99QIgSkTSQbbh0Lf7r7Z93+ygt6ya6DvCMOEL9ZqQloySdW8="}]},"directories":{},"maintainers":[{"name":"cxy227","email":"gemeiwangji789@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/dark-mode-js_0.2.1_1634813483770_0.021831752281040062"},"_hasShrinkwrap":false}},"maintainers":[{"name":"cxy227","email":"gemeiwangji789@outlook.com"}],"description":"Add dark mode to your website quickly","keywords":["darkmode","dark","nightmode","night","dark-mode","night-mode","darktheme","dark-theme"],"author":{"name":"beth"},"license":"MIT","readme":"# Dark Mode js\n[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n![jsdelivr downloads][jsdelivr-downloads-href]\n![License][license-href]\n[![twitter-href][twitter-href]](https://twitter.com/qiuge227)\n\n## 😊 项目介绍\n为你的网站快速添加暗黑模式\n\n该库使用 CSS min-blend-mode 和 :root 两种方式 将暗黑模式带入您的任何网站。您只需要复制一点代码到您的项目中，\n您将获得一个用来打开和关闭暗黑模式的小工具。该工具是轻量的，还默认使用本地存储，因此您设置的状态会被浏览器记住！\n\n我参考的项目是：https://github.com/sandoche/Darkmode.js\n之所以又写了一个，是因为，我再使用 darkmode-js 进行测试的时候，无法覆盖所有的项目\n\n## 🔧 功能点\n* 小工具自动出现\n* 保存用户选择\n* 如果操作系统首选主题是深色，自动显示深色模式（如果浏览器支持prefers-color-scheme）\n* 可以不引入小工具的情况下编写函数引用\n\n## ✨ 演示\n* [css]: https://beth-zhang.github.io/dark-mode-js/example/darkmode-js.html\n* [:root]: https://beth-zhang.github.io/dark-mode-js/example/darkmode-root.html\n* [hue-rotate]: https://beth-zhang.github.io/dark-mode-js/example/darkmode-hue.html\n\n## 📖 如何使用\ndark-mode-js 非常好用，复制粘贴以下代码或者使用 npm 包引入即可使用\n\n## 🚀 简单方法 （使用 JSDelivr CDN）\n只需要在您的 HTML 页面中嵌入以下代码\n### 第一种方式，默认通过 css min-blend-mode\n* 优点\n  * 不需要任何额外配置和修改\n* 缺点\n  * 展现上有一定的瑕疵，尤其在某些 hover 的时候，个别地方颜色可能会没有对比度没有区分的很完善\n```javascript\n<script src=\"https://cdn.jsdelivr.net/npm/@cxy227/dark-mode-js@0.1.2/dist/index.js\" > </script> \n<script>\n  function init() {\n      console.log('darkModeJs: ', darkModeJs)\n      const Widget = darkModeJs.darkMode\n      const darkmode = new Widget()\n\n      darkmode.showWidget()\n      darkmode.defaultTheme()\n  }\n\n  window.addEventListener('load', init);\n</script>\n```\n### 第二种方式，通过设置 :root 全局变量，维护一组变量集合\n* 优点\n  * 效果更好，可以自定义部分内容颜色\n* 缺点\n  * 需要添加配置，全局设置跟着 :root 的变量集走\n```javascript\n<script src=\"https://cdn.jsdelivr.net/npm/@cxy227/dark-mode-js@0.1.2/dist/index.js\" > </script> \n<script>\n  function init() {\n      console.log('darkModeJs: ', darkModeJs)\n      const Widget = darkModeJs.darkMode\n      const darkmode = new Widget()\n\n      darkmode.showWidget()\n      darkmode.defaultTheme()\n  }\n\n  window.addEventListener('load', init);\n</script>\n```\n\n### 第三种方式，通过设置 hue-rotate\n* 优点\n  * 效果比一种展示上好点，尤其针对图片和链接来说\n* 缺点\n  * 由于全局设置 filter，为了让图片展示原来的色相，针对图片再进行一次 色相旋转。在滚动时有闪屏的情况，性能不稳定\n```javascript\n<script src=\"https://cdn.jsdelivr.net/npm/@cxy227/dark-mode-js@0.1.2/dist/index.js\" > </script> \n<script>\n  function init() {\n      console.log('darkModeJs: ', darkModeJs)\n      const Widget = darkModeJs.darkHue\n      const darkmode = new Widget()\n\n      darkmode.showWidget()\n      darkmode.defaultTheme()\n  }\n\n  window.addEventListener('load', init);\n</script>\n```\n\n## 📦 使用 NPM\n```javascript\nnpm install dark-mode-js\n```\n\n然后添加一下 JavaScript 代码\n```javascript\nimport darkModeJs from '@cxy227/dark-mode-js'\nconst Widget = darkModeJs.darkMode\nconst darkmode = new Widget()\n\ndarkmode.showWidget()\ndarkmode.defaultTheme()\n```\n\n## ⚙️ 参数设置\n```javascript\nconst options = {\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}\n```\n\n## 🎹 浏览器兼容性\n在此处检查兼容性：\n● https://caniuse.com/#search=mix-blend-mode\n● https://caniuse.com/#search=prefers-color-scheme（自动激活暗模式）\n\n## 🧰 开发测试\n● npm start\n\n## 📄 证书（License）\n[MIT License](./LICENSE)\n\nCopyright (c) beth\n\n## 参考\n查找各种 emoji 图表：https://emojipedia.org/first-quarter-moon/\n查找各种 徽章：https://shields.io/\n\n\n<!-- Badges -->\n[npm-version-src]: https://img.shields.io/npm/v/@cxy227/dark-mode-js\n[npm-version-href]: https://npmjs.com/package/@cxy227/dark-mode-js\n[npm-downloads-src]: https://img.shields.io/npm/dw/@cxy227/dark-mode-js\n[npm-downloads-href]: https://npmjs.com/package/@cxy227/dark-mode-js\n[license-src]: https://img.cxy227.io/npm/l/@cxy227/dark-mode-js.svg\n[license-href]: https://img.shields.io/badge/license-MIT-green\n[jsdelivr-downloads-href]: https://img.shields.io/jsdelivr/gh/hy/cxy227/dark-mode-js\n[twitter-href]: https://img.shields.io/twitter/url?label=qiuge227&style=social&url=https%3A%2F%2Ftwitter.com%2Fqiuge227","readmeFilename":"README.md"}