{"_id":"@abnpm/vite-plugin-theme","name":"@abnpm/vite-plugin-theme","dist-tags":{"latest":"0.8.9"},"versions":{"0.8.9":{"name":"@abnpm/vite-plugin-theme","version":"0.8.9","description":"Vite plugin for dynamically changing the theme color of the interface","main":"dist/index.js","module":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist && rimraf es","dev":" tsup src/index.ts --dts --format cjs,esm --watch","dev:client":"tsc -w --p tsconfig.client.json","build":"npm run clean  && tsup src/index.ts --dts --format cjs,esm && tsc -p tsconfig.client.json","log":"conventional-changelog -p angular -i CHANGELOG.md -s","example:dev":"npm -C example run serve","example:build":"npm -C example run build","release:prepare":"shipjs prepare","lint:lint-staged":"lint-staged -c ./.husky/lintstagedrc.js","lint:pretty":"pretty-quick --staged","lint:eslint":"eslint \"src/**/*.{ts,tsx}\" --fix","test":"jest --coverage","test:watch":"jest --watch","install:husky":"is-ci || husky install","_postinstall":"npm run install:husky"},"keywords":["vite"],"author":{"name":"Vben"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/vbenjs/vite-plugin-theme.git"},"bugs":{"url":"https://github.com/vbenjs/vite-plugin-theme/issues"},"homepage":"https://github.com/vbenjs/vite-plugin-theme/tree/master/#readme","peerDependencies":{"vite":">=2.0.0-beta.49"},"devDependencies":{"@commitlint/cli":"^12.1.4","@commitlint/config-conventional":"^12.1.4","@types/chalk":"^2.2.0","@types/debug":"^4.1.5","@types/fs-extra":"^9.0.11","@types/jest":"^26.0.23","@types/less":"^3.0.2","@types/node":"^14.17.1","@typescript-eslint/eslint-plugin":"^4.25.0","@typescript-eslint/parser":"^4.25.0","@vue/compiler-sfc":"^3.0.11","commitizen":"^4.2.4","conventional-changelog-cli":"^2.1.1","eslint":"^7.27.0","eslint-config-prettier":"^8.3.0","eslint-plugin-jest":"^24.3.6","fs-extra":"^9.1.0","husky":"^5.2.0","jest":"^26.6.3","less":"^4.1.1","lint-staged":"^10.5.4","pinst":"^2.1.6","prettier":"^2.3.0","pretty-quick":"^3.1.0","rimraf":"^3.0.2","shipjs":"^0.23.2","ts-jest":"^26.5.6","tsup":"^4.11.1","typescript":"^4.2.4","vite":"^3.1.0"},"dependencies":{"@types/node":"^14.17.1","@types/tinycolor2":"^1.4.2","chalk":"^4.1.1","clean-css":"^5.1.2","debug":"^4.3.2","esbuild":"^0.11.23","esbuild-plugin-alias":"^0.1.2","tinycolor2":"^1.4.2"},"_id":"@abnpm/vite-plugin-theme@0.8.9","gitHead":"d55414e297ddd94859ec6dc07be6b9d37973b8c7","_nodeVersion":"20.9.0","_npmVersion":"10.1.0","dist":{"integrity":"sha512-9+L3nNjEPw0Csp7oVUH5656N3Qm1zwKGaTORWy02/4kyib+gcYAiYRURl3qfjKe9rjw/GMs/dtPU4TL+An/UOg==","shasum":"cc234ab84591476fef62890022fc3bdb4a263c1b","tarball":"https://registry.npmjs.org/@abnpm/vite-plugin-theme/-/vite-plugin-theme-0.8.9.tgz","fileCount":14,"unpackedSize":2617629,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIE6KLZ+ITIjhH1Ki7+8/C8NzUsZ5oOpjkNcVb+0o2EcaAiEA58Hhl6O+8R7xLN6JsfyaDIUoZz3wJD4J8TouE6F9+Cc="}]},"_npmUser":{"name":"abnpm","email":"493179880@qq.com"},"directories":{},"maintainers":[{"name":"abnpm","email":"493179880@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vite-plugin-theme_0.8.9_1756897506053_0.06362750139648066"},"_hasShrinkwrap":false}},"time":{"created":"2025-09-03T11:05:05.975Z","0.8.9":"2025-09-03T11:05:06.326Z","modified":"2025-09-03T11:05:06.576Z"},"maintainers":[{"name":"abnpm","email":"493179880@qq.com"}],"description":"Vite plugin for dynamically changing the theme color of the interface","homepage":"https://github.com/vbenjs/vite-plugin-theme/tree/master/#readme","keywords":["vite"],"repository":{"type":"git","url":"git+https://github.com/vbenjs/vite-plugin-theme.git"},"author":{"name":"Vben"},"bugs":{"url":"https://github.com/vbenjs/vite-plugin-theme/issues"},"license":"MIT","readme":"# vite-plugin-theme\n\n**中文** | [English](./README.md)\n\n[![npm][npm-img]][npm-url] [![node][node-img]][node-url]\n\n用于动态更改界面主题色的 vite 插件。\n\n在 vite 处理 css 后,动态解析 css 文本内符合插件配置的颜色值的时候,从所有输出的 css 文件提取指定的颜色样式代码。并创建一个仅包含颜色样式的`app-theme-style.css`文件，动态插入到指定的位置(默认 body 底部),然后将所使用的自定义样式/组件库样式颜色替换为新的颜色,以达到动态更改项目主题色的目的\n\n### 安装 (yarn or npm)\n\n**node version:** >=12.0.0\n\n**vite version:** >=2.0.0\n\n```\nyarn add vite-plugin-theme -D\n```\n\n或者\n\n```\nnpm i vite-plugin-theme -D\n```\n\n## 使用\n\n- 在 `vite.config.ts` 中配置,该方式可以按需引入需要的功能即可\n\n```ts\nimport { defineConfig, Plugin } from 'vite';\nimport vue from '@vitejs/plugin-vue';\n\nimport { viteThemePlugin, mixLighten, mixDarken, tinycolor } from 'vite-plugin-theme';\n\nexport default defineConfig({\n  plugins: [\n    vue(),\n    viteThemePlugin({\n      // 匹配需要修改的颜色\n       colorVariables: [],\n    });\n  ],\n});\n```\n\n## 参数说明\n\n`viteThemePlugin(Options)`\n\n**Options**\n\n| 参数 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| colorVariables | `string[]` | - | 如果 css 内包含在该数组内的颜色值，则会抽取出 css |\n| wrapperCssSelector | `string` | - | 通用外层选择器。可以传入 'body'等用用选择器来提高层级 |\n| resolveSelector | `(selector:string)=>string` | - | 自定义选择器转换 |\n| customerExtractVariable | `(css:string)=>string` | - | 自定义 css 匹配颜色抽取逻辑 |\n| fileName | `string` | `app-theme-style.hash.css` | 打包后输出的文件名 |\n| injectTo | `body`或`head`或`body-prepend` | `body` | 生产环境加载的 css 注入到那个标签体 |\n\n## 示例项目\n\n[Vben Admin](https://github.com/anncwb/vue-vben-admin)\n\n## 借鉴项目\n\n- [webpack-theme-color-replacer](https://github.com/hzsrc/webpack-theme-color-replacer)\n- [webpack-stylesheet-variable-replacer-plugin](https://github.com/eaTong/webpack-stylesheet-variable-replacer-plugin)\n\n## License\n\nMIT\n\n[npm-img]: https://img.shields.io/npm/v/vite-plugin-html.svg\n[npm-url]: https://npmjs.com/package/vite-plugin-html\n[node-img]: https://img.shields.io/node/v/vite-plugin-html.svg\n[node-url]: https://nodejs.org/en/about/releases/\n","readmeFilename":"README.zh_CN.md","_rev":"1-2bb6feb6a1180bea3184dbaed8b2c258"}