huangshuwei / theme-switcher-tool

theme switcher tool

Theme Switcher Tool

theme switcher tool. these are examples with theme-generator-webpack-plugin

• base on react antd demo
• base on vue element demo

Install

Browser Environment

<script src="//unpkg.com/theme-switcher-tool"></script>

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<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}

License

This project is licensed under MIT