{"id":13417413,"url":"https://github.com/GitOfZGT/vite-plugin-theme-preprocessor","last_synced_at":"2025-03-15T02:31:20.068Z","repository":{"id":37362611,"uuid":"353632614","full_name":"GitOfZGT/vite-plugin-theme-preprocessor","owner":"GitOfZGT","description":"css theme preprocessor plugin for vite","archived":false,"fork":false,"pushed_at":"2022-12-01T14:41:27.000Z","size":2470,"stargazers_count":163,"open_issues_count":15,"forks_count":14,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-19T18:44:26.467Z","etag":null,"topics":["less","sass","themes","vite-plugin","vitejs"],"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/GitOfZGT.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-04-01T08:41:09.000Z","updated_at":"2024-10-07T11:44:20.000Z","dependencies_parsed_at":"2023-01-23T20:31:13.620Z","dependency_job_id":null,"html_url":"https://github.com/GitOfZGT/vite-plugin-theme-preprocessor","commit_stats":null,"previous_names":[],"tags_count":25,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GitOfZGT%2Fvite-plugin-theme-preprocessor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GitOfZGT%2Fvite-plugin-theme-preprocessor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GitOfZGT%2Fvite-plugin-theme-preprocessor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GitOfZGT%2Fvite-plugin-theme-preprocessor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GitOfZGT","download_url":"https://codeload.github.com/GitOfZGT/vite-plugin-theme-preprocessor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243674824,"owners_count":20329167,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["less","sass","themes","vite-plugin","vitejs"],"created_at":"2024-07-30T22:00:36.754Z","updated_at":"2025-03-15T02:31:19.494Z","avatar_url":"https://github.com/GitOfZGT.png","language":"JavaScript","readme":"# @zougt/vite-plugin-theme-preprocessor\n\n[中文文档](./README.zh.md)  \n\nA [vite v2.0+](https://cn.vitejs.dev/) plugin, allows you to easily implementing dynamic themes based on `Less` or `Sass`.\n\n- Easy to use.\n- Unlimited UI framework, Element-ui、Iview、Ant-design and others (based Less/Sass).\n- Can not use css3 vars.\n- Good browser compatibility (IE9+ ?,but Vite lowest polyfill to IE11, You also can use the webpack plugin [@zougt/some-loader-utils](https://github.com/GitOfZGT/some-loader-utils)).\n\n[Demo repositories](https://github.com/GitOfZGT/dynamic-theme-demos)\n\n## Dynamic theme mode\n\n\u003e v1.4.0 + supported\n\nAny theme color can be selected from the color palette. Here, take LESS as an example, which is also applicable to SCSS.\n\n[One inline demo](https://gitofzgt.github.io/vite-dynamictheme-antd-vue-demo/)\n\n[One demo repository](https://github.com/GitOfZGT/vite-dynamictheme-antd-vue-demo)\n\n![example view](https://img-blog.csdnimg.cn/9bee30d711c54933a7e4ac0e28cdb7c3.gif#pic_center)\n\n### Install\n\n```bash\n# use pnpm （or npm）\npnpm install color @zougt/vite-plugin-theme-preprocessor @zougt/some-loader-utils -D\n# use yarn\nyarn add color @zougt/vite-plugin-theme-preprocessor @zougt/some-loader-utils -D\n```\n\n**vite.config.js**\n\n\u003e The config Only for Dynamic theme mode.\n\n```js\nimport { defineConfig } from \"vite\";\nimport {\n  themePreprocessorPlugin,\n  themePreprocessorHmrPlugin,\n} from \"@zougt/vite-plugin-theme-preprocessor\";\nimport path from \"path\";\nexport default defineConfig({\n  plugins: [\n    themePreprocessorPlugin({\n      less: {\n        // Enable Dynamic theme mode.\n        arbitraryMode: true,\n        // Default theme color，It is usually the same as a theme color (@primary-color) in src/theme/theme-vars.less .\n        defaultPrimaryColor: \"#512da7\",\n        // Only one item of multipleScopeVars\n        multipleScopeVars: [\n          {\n            // Any string, required\n            scopeName: \"theme-default\",\n            // path or varscontent must be selected\n            path: path.resolve(\"src/theme/theme-vars.less\"),\n            // varsContent same as content in path\n            // varsContent:`@primary-color:${defaultPrimaryColor};`\n          },\n        ],\n        // The color in CSS is not generated by the theme color variable, and it can also be extracted into the theme CSS to improve the weight\n        includeStyleWithColors: [\n          {\n            // color can be string or string[], example: [\"#ffffff\",\"#000\"] or [\"transparent\",\"none\"].\n            color: \"#ffffff\",\n            // Exclude css props, example: not be #ffffff in background.\n            // excludeCssProps:[\"background\",\"background-color\"]\n            // Exclude css selectors\n            // excludeSelectors: [\n            //   \".ant-btn-link:hover, .ant-btn-link:focus, .ant-btn-link:active\",\n            // ],\n          },\n        ],\n      },\n      // scss:{\n\n      // },\n    }),\n    // development need theme HMR\n    themePreprocessorHmrPlugin(),\n  ],\n});\n```\n\n**src/theme/theme-vars.less**\n\n```css\n/*Note: This file should not be @import in other .less, The variables in this file are not used to set the theme of the project (of course, you can use it as the default theme during loading). The main function is that as long as the variable value here is different from the original variable value of the project, CSS that changes with the theme color gradient will be extracted after compilation*/\n\n/*Important: Once the content of this file is fixed, it does not need to be changed. You can dynamically switch topics online use setCustomTheme method*/\n\n/*Emphasis: the change of variable value will affect the changes of gradientReplacer and targetValueReplacer available attributes of setCustomTheme method, so once the content is fixed, it does not need to be changed.*/\n\n/*A theme color, same as defaultPrimaryColor of themePreprocessorPlugin, inline switch use setCustomTheme({primaryColor})*/\n@primary-color: #512da7;\n\n/*The style corresponding to this color will also change with the main color by default, inline switch  can use setCustomTheme({gradientReplacer:{\"#F7D06B\"}}) */\n@alert-success-bg-color: #F7D06B;\n\n@border-radius-base: 6px;\n```\n\n**Switch Theme Online**\n\nuse `@setCustomTheme` module\n\n```js\nimport Color from \"color\";\n// \"@setCustomTheme\" from themePreprocessorPlugin,Color is essential in setCustomTheme method.\nimport setCustomTheme from \"@setCustomTheme\";\nsetCustomTheme({\n  Color,\n  primaryColor: \"#FF005A\",\n  //gradientReplacer:{},\n  //targetValueReplacer:{}\n});\n```\n\nThe available attributes of `gradientReplacer` and `targetValueReplacer` follow Less/SCSS content changes.\n\n```shell\n# npm run dev\n# npx z-theme inspect to see  gradientReplacer and targetValueReplacer\nnpx z-theme inspect\n```\n\n## Preset theme mode\n\n[one inline demo](https://gitofzgt.github.io/dynamic-theme-demos/vite-antd-vue-preset-theme/)\n\n[one demo repository](https://github.com/GitOfZGT/dynamic-theme-demos/tree/master/projects/vite-antd-vue-preset-theme)\n\n![效果图](https://img-blog.csdnimg.cn/caa3ccb9949a4fc4a6a8c7442291ed07.gif)\n\n### Install\n\n```bash\n# use pnpm or npm\npnpm install @zougt/vite-plugin-theme-preprocessor -D\n# use yarn\nyarn add @zougt/vite-plugin-theme-preprocessor -D\n```\n\n**vite.config.js**\n\n\u003e The config Only for Preset theme mode。\n\n```js\nimport themePreprocessorPlugin from \"@zougt/vite-plugin-theme-preprocessor\";\nexport default {\n  plugins: [\n    themePreprocessorPlugin({\n      scss: {\n        // close arbitraryMode\n        arbitraryMode: false,\n        // Provide multiple  LESS/SCSS variable files\n        multipleScopeVars: [\n          {\n            scopeName: \"theme-default\",\n            // path or varscontent must be selected\n            path: path.resolve(\"src/theme/default-vars.scss\"),\n            // varsContent same as content in path\n            // varsContent:`@primary-color:${defaultPrimaryColor};`\n          },\n          {\n            scopeName: \"theme-mauve\",\n            path: path.resolve(\"src/theme/mauve-vars.scss\"),\n          },\n        ],\n        // The color in CSS is not generated by the theme color variable, and it can also be extracted into the theme CSS to improve the weight\n        includeStyleWithColors: [\n          {\n            // color can be string or string[], example: [\"#ffffff\",\"#000\"] or [\"transparent\",\"none\"].\n            color: \"#ffffff\",\n            // Exclude css props, example: not be #ffffff in background.\n            // excludeCssProps:[\"background\",\"background-color\"]\n            // Exclude css selectors\n            // excludeSelectors: [\n            //   \".ant-btn-link:hover, .ant-btn-link:focus, .ant-btn-link:active\",\n            // ],\n          },\n        ],\n        // add scopeName to html tag className. default use multipleScopeVars[0].scopeName\n        defaultScopeName: \"\",\n        //  extract independent theme CSS files in production mode  extract为true以下属性有效\n        extract: true,\n        // theme CSS files output dir , default use viteConfig.build.assetsDir\n        outputDir: \"\",\n        // link tag id \n        themeLinkTagId: \"theme-link-tag\",\n        // \"head\"||\"head-prepend\" || \"body\" ||\"body-prepend\"\n        themeLinkTagInjectTo: \"head\",\n        // Remove scopeName in the extracted CSS content.\n        removeCssScopeName: false,\n        // custom css file name.\n        customThemeCssFileName: (scopeName) =\u003e scopeName,\n      },\n      // less: {\n      //   multipleScopeVars: [\n      //     {\n      //       scopeName: \"theme-default\",\n      //       path: path.resolve(\"src/theme/default-vars.less\"),\n      //     },\n      //     {\n      //       scopeName: \"theme-mauve\",\n      //       path: path.resolve(\"src/theme/mauve-vars.less\"),\n      //     },\n      //   ],\n      // },\n    }),\n  ],\n};\n```\n\n**Switch Theme Online**\n\nWhat needs to be done:\n\n1. add scopeName as clasName to Html tag , remove prev scopeName from html tag.\n2. in production , if extract , need toggle the link href.\n\nfor this, has toggleTheme method :\n\n```js\nimport { toggleTheme } from \"@zougt/vite-plugin-theme-preprocessor/dist/browser-utils\";\n\ntoggleTheme({\n  scopeName: \"theme-default\",\n});\n```","funding_links":[],"categories":["Plugins"],"sub_categories":["Framework-agnostic Plugins"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGitOfZGT%2Fvite-plugin-theme-preprocessor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FGitOfZGT%2Fvite-plugin-theme-preprocessor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGitOfZGT%2Fvite-plugin-theme-preprocessor/lists"}