https://github.com/huangshuwei/theme-switcher-tool
theme switcher tool
https://github.com/huangshuwei/theme-switcher-tool
react switcher theme vuejs
Last synced: 2 months ago
JSON representation
theme switcher tool
- Host: GitHub
- URL: https://github.com/huangshuwei/theme-switcher-tool
- Owner: huangshuwei
- Created: 2020-05-27T01:34:13.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2021-02-07T16:28:05.000Z (about 4 years ago)
- Last Synced: 2025-01-08T11:20:08.332Z (4 months ago)
- Topics: react, switcher, theme, vuejs
- Language: TypeScript
- Homepage:
- Size: 26.4 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Theme Switcher Tool
[](https://npmjs.org/package/theme-switcher-tool)
[](https://npmjs.org/package/theme-switcher-tool)
theme switcher tool.
these are examples with [theme-generator-webpack-plugin](https://github.com/huangshuwei/theme-generator-webpack-plugin)
- [base on react antd demo](http://doc.huangsw.com/theme-generator-webpack-plugin/react-antd/)
- [base on vue element demo](http://doc.huangsw.com/theme-generator-webpack-plugin/vue-element/)
### Install
**Browser Environment**
```
```
**ES Module Environment**
```
yarn add theme-switcher-tool
```
or
```
npm install theme-switcher-tool
```
### Usage
```
import ThemeSwitcherTool from 'theme-switcher-tool';
```
```
const themeSwitcherTool = ThemeSwitcherTool({
// Your theme list
themeList: [
{ themeName: "theme-default", themePath: "https://unpkg.com/vue-easytable/libs/theme-default/index.css" },
{ themeName: "theme-dark", themePath: "https://unpkg.com/vue-easytable/libs/theme-dark/index.css" },
],
// Your actual style id
styleLinkId: "theme_creator_cli_style_id",
useStorage: true,
storageKey: "theme_switcher_tool_theme"
});
const historyTheme = themeSwitcherTool.getCurrentTheme() || "theme-dark";
/*
switcher theme
1、you can show your loading message
*/
themeSwitcherTool.switcher({
themeName: historyTheme
}).then(()=>{
// somthing to do. such as close your loading message
})
```
### API
**config**
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 参考值 |
|---------- |--------------------------------- |---------- |---------------- |-------- |-------- |
| `themeList` | 需要切换的主题列表 | `{Array}` | — | — | `[{"themeName":"theme-black","themePath":"./themes/theme-black.css"},{"themeName":"theme-blue","themePath":"./themes/theme-blue.css"}]` |
| `styleLinkId` | html`link`标签id | `{String}` | — | — | `theme_creator_cli_style_id` |
| `useStorage` | 是否使用 `localStorage`记录当前主题名称 | `{Bool}` | — | `false` | — |
| `storageKey` | `localStorage` key 值 | `{String}` | — | — | — |
**methods**
| 名称 | 说明 | 参数 | 返回值类型 |
|--------- |--------------------------------- |---------- |---------------- |
| `getCurrentTheme` | 返回当前主题名称（当设置了 `localStorage` 存储） | — | `{String}`|
| `switcher` | 切换主题 | `themeName` | `{String}` | — |
## License
This project is licensed under [MIT](http://www.opensource.org/licenses/mit-license.php)