{"_id":"@calibur/dark-mode","_rev":"1-2f48f07876276e389e681402973a2d96","name":"@calibur/dark-mode","dist-tags":{"latest":"1.0.17"},"versions":{"1.0.17":{"name":"@calibur/dark-mode","version":"1.0.17","description":"h5页面深色模式的less/scss颜色转换","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"ISC","_id":"@calibur/dark-mode@1.0.17","_nodeVersion":"12.13.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-4fNkzob6lMwZfaFlNN8LqcBG8djrUfi/WggqL0R64Tbu3/X1tstSKazc+9frXDQpwdvyeUVl3Lb0TPouiPXfwQ==","shasum":"c391b1b955430bf6e0c7a734c0f47a46ae3619e4","tarball":"https://registry.npmjs.org/@calibur/dark-mode/-/dark-mode-1.0.17.tgz","fileCount":8,"unpackedSize":10980,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfZYNCCRA9TVsSAnZWagAAkpAP/33o1FJ/BJv6XL42/Pog\nKGN1ZZ6J1C87mgm0zK0ijLhohm35AP9QObdIwMH96jrzv+9+0SqCwrLxrgNW\nXI/7hae5wd4ALd0jJNbJLCte/AP6rp+nLV9M8X4U9/NUiuFWeXrC88kwfPVU\npJJX6dsfayurnhUos37IJhYBe7B+G6tWdupmX6+ScMlKdHTKYA/Jx48t2erh\nCcj3xXu8C+JgA3RczfNQBvXa356wK6cbSGJFGhF6V5m8RvodRDJMxLwvV8wJ\n/C3oSlVP3A+CaXIK8MxCvBg19g9z8N1mk+jFYYGJ1SEs8W1+7YQmWElH/UDl\n3oQ+hFcpQ5ykYk7eR/wvY0+gFmXllJMBz/bt7pzcAKoWNWS8EUflMYrokDEM\nAgi6Jp3HBRtEzDN9IjfrmTouHYHTYVY0St7Kp+QWMCM9kTTjkAnSTIHSfqwz\nw5GA1l1WqqNZjfHyCyCwD1+8AWW8DegKQvg8cWnR42v7xeLffBBIViU0exXv\npQa3yAOfaFUez2OWJ65AH158U2lvbr2S4JBrtvVoF0vityVMFZiHvmPH8ZKf\nNleU8KKJlMxJj5V0ptrT4b4g6/yVOQh9S+gRFEEYrXU1I0huHdmpNDBju5h6\nBXiFUiTUf85+c66xDmGzZAKxjJ2+8QsZ4VfpCy7EZHFPeCQCkGDT0jMFOFQM\nvZew\r\n=dYJR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFoIQZQA+1NXSHdDEz3JdPChy0QKBEMzp5Vi3fZT8SzbAiAqos8Va6Cv5cgpZvG1jODn5oL2SVd2lAFnHI00Te26pQ=="}]},"maintainers":[{"name":"falstack","email":"icesilt@outlook.com"}],"_npmUser":{"name":"falstack","email":"icesilt@outlook.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/dark-mode_1.0.17_1600488258252_0.08413673112417963"},"_hasShrinkwrap":false}},"time":{"created":"2020-09-19T04:04:18.056Z","1.0.17":"2020-09-19T04:04:18.354Z","modified":"2022-04-04T21:32:29.176Z"},"maintainers":[{"name":"falstack","email":"icesilt@outlook.com"}],"description":"h5页面深色模式的less/scss颜色转换","license":"ISC","readme":"# @calibur/dark-mode\n\nh5页面深色模式的less/scss颜色转换\n\n## 快速引入\n\n```\nnpm install @calibur/dark-mode\n```\n\n### 全局引用\n```javascript\n// webapck中全局引用深色模式转换 mixins\n{\n  loader: 'style-resources-loader',\n  options: {\n    // dark-mixins.scss or dark-mixins.less\n    patterns: [require.resolve('@calibur/dark-mode/dark-mixins.less')],\n  }\n}\n```\n### 局部引用\n```less\n// 局部引用深色模式转换 mixins\n@import '~@calibur/dark-mode/dark-mixins.less';\n```\n\n如果为深色模式，在`html`节点上添加`class=\"night-mode\"`.\n\n例如：\n\n```javascript\ndocument.querySelector('html').classList.add('night-mode');\n```\n\n## mixin 函数使用规范\n\n*以less为例*\n\n- `@key`是css属性,例如`background` `background-color` `color` `border-color` 等,\n- `@value`是具体的颜色色值，支持hex/rgb/rgba/hsl/hsla。\n\n1. ~~`.dark-img();`~~\n2. `.dark-elem(@property, @value);`\n3. `.dark-bg(@property, @value);`\n4. `.dark-gray-bg(@property, @value);`\n5. `.dark-cus(@property, @lightCSS, @darkCSS);`\n\n具体用法请继续往下看！\n\n*请按照以下四种元素类型使用对应转换函数*\n\n### ~~1. 图片/背景图片/多色图标 `.dark-img();`~~\n\n*图片不需要处理*\n\n\n### 2. 文字/图标/按钮背景色/描边 `.dark-elem(@property, @value);`\n\n将\n```less\n.text {\n  font-size: 13px;\n  color: #333;\n  border: 2px solid #333;\n}\n\n// 按钮背景色\n.button {\n  width: 80px;\n  height: 30px;\n  color: #333;\n  background: #fff;\n}\n```\n\n更换为\n```less\n.text {\n  font-size: 13px;\n  border: 2px solid;\n  .dark-elem(color, #333);\n  .dark-elem(border-color, #333);\n}\n\n.button {\n  width: 80px;\n  height: 30px;\n  .dark-elem(color, #333);\n  .dark-elem(background, #fff);\n}\n```\n\n\n### 3. 色块/背景色 `.dark-bg(@property, @value);`\n\n提示：按钮/图标/描边的背景色，用 `.dark-elem()`\n\n将\n```less\n.box {\n  background: #fff;\n  width: 100px;\n}\n```\n\n更换为\n```less\n.box {\n  .dark-bg(background, #fff);\n  width: 100px;\n}\n```\n\n![demo](http://i0.hdslb.com/bfs/activity-plat/static/20200611/df3e2ff90b315fca2f8d24a29cb68a47/ZGTQw2gYzv.png)\n\n\n### 4. 浅灰色分割条或背景 `.dark-gray-bg(@property, @value);`\n\n\n`background`为浅灰色且亮度>=95%的背景色 `#f3f3f3` `#f2f2f2` `#f7f7f7` `#fafafa` `#fcfcfc`\n\n![avatar](http://i0.hdslb.com/bfs/activity-plat/static/20200611/df3e2ff90b315fca2f8d24a29cb68a47/ApDp6q~u-.png)\n\n将\n```less\n.app {\n  width: 100%;\n  height: 100%;\n  background: #f7f7f7;\n}\n```\n\n改成\n\n```less\n.app {\n  width: 100%;\n  height: 100%;\n  .dark-gray-bg(background, #f7f7f7);\n}\n```\n\n\n### 5. 自定义转换 `.dark-cus(@property, @lightCSS, @darkCSS);`\n\n对于较复杂的属性，建议自行转换为对应的深色属性，填入第三个参数中，\n\n`@darkValue` \n\n将\n\n```less\n.app {\n  width: 100%;\n  height: 100%;\n  box-shadow: 10px 5px 5px #F4F4F4;\n  background: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c);\n}\n```\n\n改成\n\n```less\n.app {\n  width: 100%;\n  height: 100%;\n  .dark-cus(box-shadow, 10px 5px 5px #F4F4F4, 10px 5px 5px #1E1E1E);\n  .dark-cus(background, linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c), linear-gradient(0.25turn, #467C94, #2A3025, #E19441));\n}\n```\n","readmeFilename":"README.md"}