theme switcher tool. these are examples with theme-generator-webpack-plugin
Browser Environment
<script src="//unpkg.com/theme-switcher-tool"></script>
ES Module Environment
yarn add theme-switcher-tool
or
npm install theme-switcher-tool
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
})
config
参数 | 说明 | 类型 | 可选值 | 默认值 | 参考值 |
---|---|---|---|---|---|
themeList |
需要切换的主题列表 | {Array<Object>} |
— | — | [{"themeName":"theme-black","themePath":"./themes/theme-black.css"},{"themeName":"theme-blue","themePath":"./themes/theme-blue.css"}] |
styleLinkId |
htmllink 标签id |
{String} |
— | — | theme_creator_cli_style_id |
useStorage |
是否使用 localStorage 记录当前主题名称 |
{Bool} |
— | false |
— |
storageKey |
localStorage key 值 |
{String} |
— | — | — |
methods
名称 | 说明 | 参数 | 返回值类型 |
---|---|---|---|
getCurrentTheme |
返回当前主题名称(当设置了 localStorage 存储) |
— | {String} |
switcher |
切换主题 | themeName |
{String} |
This project is licensed under MIT