Theme 主题切换

通过切换主题来减轻长时间使用屏幕带来的视觉疲劳

演示

1. 主题切换是通过 ph-utils 工具库的 theme 工具类控制
2. 为了每次切换主题后，重新加载能够生效，需要在应用开始的时候, 执行 initTheme() 方法

main.ts

import { initTheme } from 'ph-utils/theme';

initTheme().then();

createApp(App).use(router).mount('#app');

基本使用

提供多种风格的主题切换按钮: 按钮、下拉选择、单选按钮组、开关

切换主题后，如果要让应用启动的时候也应用上一次切换的主题, 需要在应用开始的地方调用 initTheme() 函数

// main.js
import { initTheme } from 'ph-utils/theme';

// await initTheme();
initTheme().then();

自定义风格

框架内置的主题切换其实就是一个排版的样式，核心的主题切换的逻辑是调用的 ph-utils 库的 theme 模块相关函数来实现的。

通常调用的模块有: getTheme()、applyTheme()

所以完全可以自定义按钮来实现主题切换, 下面就使用 RadioGroup + Icon 来实现。

更改主题色

除了修改主题风格，还可以修改主题色，通过修改 ThemeColor 来实现。

生成的主题色代码如下:

跟主题模式一样，如果想要再下次启动时也应用选择的主题色，需要在应用启动时，调用 initColorTheme() 函数

// main.js
import { initColorTheme } from 'ph-utils/theme';

initColorTheme().then();