@itshixun/qst-ui-system
Version:
48 lines (47 loc) • 2.33 kB
TypeScript
import { DayNightModeEnum, ThemeOption, cssVarCodex, UITheme } from './types';
export declare const currentThemeList: UITheme[];
export declare const currentThemeOption: ThemeOption;
/**
* 初始化QstUI：初始化样式，注入样式，设置默认主题
* @param option {ThemeOption} UI主题选项
*/
export declare const initQstTheme: (option?: ThemeOption) => void;
/**
* 为保持样式覆盖，重新将注入<head>的样式移动到最后。比如使用动态加载组件功能时，
* 每次切换页面都会在head内新增部分样式，此时需要重新将主题样式移动到最后，来保证主题样式的覆盖作用
*/
export declare const resetThemeStyleInjection: () => void;
/**
* 自动重置样式注入功能：监控<head>中的<style>样式顺序，如果新增样式标签，自动将主题样式重置到最底部，保证主题样式的覆盖作用
*/
export declare const autoStyleInjection: () => void;
/**
* 在header中插入style标签，生成根据传入的option生成的样式
* @param option {ThemeOption} UI主题选项
*/
export declare const injectThemeStyle: (option?: ThemeOption) => void;
/**
* 更新主题色，并重新注入样式
* @param themeName 主题名称
* @param mode 模式 light / dark
* @param color 主题色 Record<"primary" | "success" | "warning" | "danger" | "info", string>
*/
export declare const updateThemeColor: (themeName: string, mode: DayNightModeEnum, color: Partial<Record<(typeof cssVarCodex)['color'][number], string>>) => void;
/**
* 根据传入的主题序号切换主题
* @param themeIndex {number} 主题列表中的序号
* @returns void
*/
export declare const setThemeClassByIndex: (themeIndex: number, targetEl?: HTMLElement) => void;
/**
* 根据传入的主题名称切换主题
* @param themeName {string} 主题名称
* @returns boolean 设置成功返回true，否则返回false
*/
export declare const setThemeClassByName: (themeName: string, targetEl?: HTMLElement) => boolean;
/**
* 给指定的Dom元素切换日/夜模式样式
* @param {DayNightModeEnum} mode 要切换到的模式
* @param {HTMLElement} targetEl 目标dom元素，通常不传默认为html元素，即给整个页面切换模式
*/
export declare const toggleDayNightMode: (mode: DayNightModeEnum, targetEl?: HTMLElement) => void;