{"_id":"@ansevenlet/change-theme-color","_rev":"15-38fc96841b26e8ac9f5eb5dc43a35afa","time":{"1.1.0":"2020-10-22T05:24:50.357Z","created":"2020-10-22T06:09:36.621Z","1.0.0":"2020-10-22T06:09:36.848Z","modified":"2022-04-04T14:19:38.804Z","1.0.1":"2020-10-22T06:46:20.926Z"},"name":"@ansevenlet/change-theme-color","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@ansevenlet/change-theme-color","version":"1.0.0","description":"javascript vue element-ui theme","main":"dist/index.js","scripts":{"test":"jest","build":"webpack","docs":"jsdoc -c jsdoc.json"},"keywords":["js","lib"],"author":{"name":"ansevenlet"},"license":"ISC","repository":{"type":"git","url":"github.com/sevenlet/change-theme-color.git"},"devDependencies":{"@babel/cli":"^7.6.0","@babel/core":"^7.6.0","@babel/preset-env":"^7.6.0","clean-webpack-plugin":"^3.0.0","html-webpack-plugin":"^3.2.0","jest":"^24.9.0","jsdoc":"^3.6.3","webpack":"^4.39.3","webpack-cli":"^3.3.8"},"dependencies":{"@babel/polyfill":"^7.6.0","babel-loader":"^8.0.6","docdash":"^1.1.1","element-ui":"^2.13.2"},"peerDependencies":{"element-ui":">= 2.13.2"},"gitHead":"d7542bc3fc05d49bfd4e7c3a220c1d9902a62cc0","_id":"@ansevenlet/change-theme-color@1.0.0","_nodeVersion":"10.16.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-9rFegwsudPz8oJfeurvhr+RKADhPNx5ZZcBuv00bFLop3jJMUNTMIhZeGHo938EzboETcdSR7XinNPRm2rb1mg==","shasum":"6e83b23eb0d9020dd94c78b31351b1458206b7a7","tarball":"https://registry.npmjs.org/@ansevenlet/change-theme-color/-/change-theme-color-1.0.0.tgz","fileCount":32,"unpackedSize":77064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfkSIhCRA9TVsSAnZWagAA5pIP/0MMBU6z7a1ih/NaAqSn\noaGKEkPeP/zMEWheGotkj3Fue5TNgHwzLNNjNjnJ5sTfUczgbDOsE1JGRb6o\nxEj/qIaV6VEd/PmPX5oJajlpUsXP4KKZOBND75pFv+3Msq4YWBpEMmlngl5E\nQkqoSWsqWFWp4WTEGHji7WrXh9rrDSlRuJCxm+gD6sO4lqpRHyOwulm6S781\nOX4FOOQ5T5Rz6RR3PCB1QLKIDqhZuO+BFK6/QCdLZiTNcvHwMPFvSmobIsdO\nETs40gYEiVvBf5+qPxXA1clEAO8J60QgaiBgShXsNa83+VMI2PqOMZzvkFuf\nPNkDKGlmjKlYFyZ3oRq8xAVss2MQvMo5OCUaOx5zez6gV0jg60BxTDC1/F1D\n9JENqyTlVXP5TPHzqlP63gHHuSZ+mn/n/b8XVA5e91yYyXKBRdI+0m3ks8qU\nRgMP3voiwPbEBgEswJaQg771+fjLPYp6SyiLFO++NDOcQm9OqsjBRbo0Rbnv\nxkv2orRx8wqY2ZEKxDp2UU9kPy0XqJyU3ZrNMHlVFVbMXAr0VkcAwDT3EKWa\nGQtsnYS+h4yRufNkWU3m7Lj1tiS5OWtmU6KHcr+JV9EQw3/eU13UjaukxJHC\nsetW7qtrV3WgX3rPAn1wj4LjegDKpagLsvE4hgZhr0PBKbgivo4IuDFy0+Vw\nESYG\r\n=BPCt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCve6aYI9vRNc9PY03VpID2Z4fxewKweOikndjFOiziVwIhAO2JHi8JtTQlXenZV4SpmkVLs1aruvCAtXHgsPBiSOUy"}]},"maintainers":[{"name":"ansevenlet","email":"ansevenlet@126.com"}],"_npmUser":{"name":"ansevenlet","email":"ansevenlet@126.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/change-theme-color_1.0.0_1603346976665_0.2480784801624989"},"_hasShrinkwrap":false},"1.0.1":{"name":"@ansevenlet/change-theme-color","version":"1.0.1","description":"javascript libs","main":"dist/index.js","scripts":{"test":"jest","build":"webpack","docs":"jsdoc -c jsdoc.json"},"keywords":["js","lib"],"author":{"name":"ansevenlet"},"license":"ISC","repository":{"type":"git","url":"git+https://github.com/sevenlet/change-theme-color.git"},"devDependencies":{"@babel/cli":"^7.6.0","@babel/core":"^7.6.0","@babel/preset-env":"^7.6.0","clean-webpack-plugin":"^3.0.0","html-webpack-plugin":"^3.2.0","jest":"^24.9.0","jsdoc":"^3.6.3","webpack":"^4.39.3","webpack-cli":"^3.3.8"},"dependencies":{"@babel/polyfill":"^7.6.0","babel-loader":"^8.0.6","docdash":"^1.1.1","element-ui":"^2.13.2"},"peerDependencies":{"element-ui":">= 2.13.2"},"bugs":{"url":"https://github.com/sevenlet/change-theme-color/issues"},"homepage":"https://github.com/sevenlet/change-theme-color#readme","_id":"@ansevenlet/change-theme-color@1.0.1","_nodeVersion":"10.16.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-BiJrg4tBrqFU6EoZ2IGVjGAwShgPSH1MczFOcIzDO+F3N/99W6S9exRXN/9Rpli2mmX5RyoCbE1uLANP358M/Q==","shasum":"613bf14e5d353299ead9d62ba7a2c46b1da45373","tarball":"https://registry.npmjs.org/@ansevenlet/change-theme-color/-/change-theme-color-1.0.1.tgz","fileCount":30,"unpackedSize":87131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfkSq9CRA9TVsSAnZWagAAeCwP/2d8Q55ZnKLdOK8J9YPH\n5EEpOFgz6O6Cuka41OxO+ZuYI8yRZiUytcHnUeKeLAS1HyYVqjpu2lFrj6+D\nNsPPcZMdGKSLFQYqrfZKFs8Rsd2q75aJcm+xfmqb95i6QN9YW22e98k+XGWX\nhzto6hD1eRTvMiabHR8jJf92XQOkMNJn2GumKnoUor7LgErrrkACB1Twd80C\nCHvNIxcorg8Wi7m2Js3/AsKmdVohhyZe6EoYkBLdsRsZCYII8K+jQmPmTD6o\nWAoxgOaEKCrVnKbHuKAYSkjkwuGWq45bXWLxPEwR7T0byqQf5QjtE0a+dnVl\ntUnAXWedMpcziN1AwneYXM0c1OA9DC8Y8Emjkt6ZA1du5IvM0exRbSKjsuFU\nvwuh+ifbgBHIn0JO0FjFY2JN+TbJpuvWf1FK/A3AzzYpVPaHwXGANk/ypmvH\n+mzupmmjqSx2ud6VN2zR7lY/TN9uyZdSGx8Duo84tdPv5xRBWpNYGCouAZAL\n4aIDF9iIBbGTHaoqCf9aABATunHD6NIm9s2XYxYC3UXaUtxTdTHaltZxcsn1\ndQ9r6U8KThkG5t0ImXZXgOWwWklVttXLgjiXvjkMm+74ZysOhXAz7wGu6zrW\nAP1Dy90ki0rFZz+Lh4cgGSf2/Y0dXrgVELRwUokGj62aB/lq9xp+MbIae/PQ\n1VW4\r\n=TwKU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDbVI8OFAzbFVjgLIdDMB52D5pXxCoFTWYfPgiQ3MGXIwIgYHVkNzkaH83/tzWKbq9DkiJvnXngo3L6uYx49ErzyXo="}]},"maintainers":[{"name":"ansevenlet","email":"ansevenlet@126.com"}],"_npmUser":{"name":"ansevenlet","email":"ansevenlet@126.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/change-theme-color_1.0.1_1603349180808_0.38158532895076536"},"_hasShrinkwrap":false}},"maintainers":[{"name":"ansevenlet","email":"ansevenlet@126.com"}],"description":"javascript libs","keywords":["js","lib"],"repository":{"type":"git","url":"git+https://github.com/sevenlet/change-theme-color.git"},"author":{"name":"ansevenlet"},"license":"ISC","readme":"<!-- # biu-function\n## 第一次认真的写分享，求小星星，欢迎fork\n\n## [手把手教你发布npm函数库](http://km.alanwen.online/guide/javascript/npm.html)\n## Project setup\n```\nnpm install\n```\n\n### Compiles and hot-reloads for development\n```\nnpm run build\n```\n\n### npm publish\n```\n# login your own account\nnpm login\n# you have to modify the library name in package.json if the package exits on npmjs.com\nnpm publish\n```\n\n### build your own libs\n\nwrite your code in folder src, and build by wepback\n\n\n### docs\n\nUse jsdoc for this libaray docs, and theme is docdash. How you can config docdash, please visit [docdash Git Repo](https://github.com/clenemt/docdash). [Here](https://cancerberosgx.github.io/jsdoc-templates-demo/demo/) is more template for docjs.\n\n\n```\n// to update docs\nnpm run docs\n\n```\n\n### test\n\nUse Jest to do test. [Jest document](https://jestjs.io/docs/zh-Hans/getting-started)\n\n```\nnpm run test\n```\n\n\n### How to create this repo step by step, please visit [step by step publish npm](http://km.alanwen.online/guide/javascript/npm.html)\n -->\n\n ## 切换主题插件使用\n\n需要安装`element-ui`\n\n**安装依赖**\n\n```sh\nnpm i @ansevenlet/change-theme-color -S\n```\n\n**如何使用**\n\n```javascript\nimport { updateThemeColor } from '@ansevenlet/change-theme-color';\n/**\n * 更新主题色 \n * @param targetColor 需要修改的色值\n * @param newColor 修改后的色值\n * @param ORIGINAL_THEME elementUI主题色\n */\nupdateThemeColor(targetColor, newColor, ORIGINAL_THEME);\n```\n\n>  由于切换主题色时需要全局修改颜色变量，所以项目中需要创建颜色变量，所有使用颜色的地方必须通过变量来设置，如果使用咱们自己的组件库组件，则需要传入色值。\n\n>  组件中要有背景色和文字颜色的设置，或者其他设置只要需要变化颜色的属性都需要添加\n\n**创建变量文件 .scss文件 **\n\n定义颜色变量\n\n*variable.scss*\n\n```css\n:root{\n  --font-size: 16px; // 定义基础字号\n  --theme-color: #3398ff; // 主题色\n}\n```\n**设置颜色使用变量**\n\n```css\nbackground: var(--theme-color);\n```\n**控制颜色 修改色值**\n\n```javascript\ndocument.body.style.setProperty('--theme-color', '#ddd' || '');\n```\n*示例*\n\n```html\n<section class=\"theme-color\">\n  <!-- …… -->\n  <el-color-picker v-model=\"color\" @change=\"changeThemeColor\"></el-color-picker>\n  <!-- …… -->\n</section>\n```\n\n```javascript\n<script lang=\"ts\">\nimport {\n  defineComponent, reactive, toRefs,\n} from '@vue/composition-api';\nimport { updateThemeColor } from '@ansevenlet/change-theme-color';\n\nexport default defineComponent({\n  name: 'theme-color',\n\n  setup() {\n\n    const state = reactive({\n      color: '#fff',\n    });\n\n    /**\n     * 修改主题色\n     */\n    function changeThemeColor(color: string) {\n      updateThemeColor(color, color, ORIGINAL_THEME);\n      localStorage.setItem('theme_color', color);\n      document.body.style.setProperty('--theme-color', color);\n    }\n\n    return {\n      ...toRefs(state),\n      changeThemeColor,\n    };\n  },\n});\n</script>\n```\n","readmeFilename":"README.md","homepage":"https://github.com/sevenlet/change-theme-color#readme","bugs":{"url":"https://github.com/sevenlet/change-theme-color/issues"}}