Vue3.5 企业级管理系统实战（十四）：动态主题切换

动态主题切换是针对用户体验的常见的功能之一，我们可以自己实现如暗黑模式、明亮模式的切换，也可以利用 Element Plus 默认支持的强大动态主题方案实现。这里我们探讨的是后者通过 CSS 变量设置的方案。

1 组件准备

1.1 修改 Navbar 组件

在 src/layout/components/Navbar.vue 中添加设置按钮，代码如下：

//src/layout/components/Navbar.vue
<template><div class="navbar" flex><hamburger@toggleCollapse="toggleSidebar":collapse="sidebar.opened"></hamburger><BreadCrumb></BreadCrumb><div flex justify-end flex-1 items-center mr-20px><screenfull mx-5px></screenfull><el-tooltip content="ChangeSize" placement="bottom"><size-select></size-select></el-tooltip><svg-iconicon-name="ant-design:setting-outlined"size-2em@click="openShowSetting"></svg-icon></div></div>
</template><style scoped lang="scss">
.navbar {@apply h-[var(--navbar-height)];
}
</style><script lang="ts" setup>
import { useAppStore } from "@/stores/app";
// 在解构的时候要考虑值是不是对象，如果非对象解构出来就 丧失响应式了
const { toggleSidebar, sidebar } = useAppStore();const emit = defineEmits<{(event: "showSetting", isShow: boolean): void;
}>();const openShowSetting = () => {emit("showSetting", true);
};
</script>

1.2 封装 RightPanel 组件

我们希望点击设置按钮后，右侧出现抽屉面板。在 src/components 下新建 RightPanel，然后新建 index.vue 文件，代码如下：

//src/components/RightPanel/index.vue 
<template><el-drawer:model-value="modelValue":direction="direction":title="title"@close="handleClose"><slot></slot></el-drawer>
</template><script lang="ts" setup>
import type { DrawerProps } from "element-plus";
import type { PropType } from "vue";
defineProps({modelValue: {type: Boolean,default: false},direction: {type: String as PropType<DrawerProps["direction"]>,default: "rtl"},title: {type: String,default: ""}
});
const emit = defineEmits(["update:modelValue"]);
const handleClose = () => {emit("update:modelValue", false);
};
</script>

1.3 封装 ThemePicker 组件

在 src/components 下新建 ThemePicker/index.vue 用来选择主题颜色，代码如下：

//src/components/ThemeOicker/index.vue
<template><el-color-picker v-model="theme" :predefine="predefineColors" />
</template><script lang="ts" setup>
import { useSettingStore } from "@/stores/settings";const store = useSettingStore();const theme = ref(store.settings.theme);
const predefineColors = ["#ff4500","#ff8c00","#ffd700","#90ee90","#00ced1","#1e90ff","#c71585"
];
watch(theme, (newValue) => {store.changeSetting({ key: "theme", value: newValue });
});
</script>

 注：useSettingStore 会在后文中说明。

1.4 封装 Settings 组件

在 src/layout/components 下新建 Settings/index.vue，用来引入系统配置相关的组件，代码如下：

//src/layout/components/Settings/index.vue
<template><div class="drawer-item"><span>主题色</span><theme-picker></theme-picker></div><!--后面可以放其他配置项-->
</template>

1.5 页面引用

修改 src/layout/index.vue，引入 RightPanel 组件，并修改 navbar 组件自定义事件，代码如下：

//src/layout/index.vue
<template><div class="app-wrapper"><div class="sidebar-container"><sidebar></sidebar></div><div class="main-container"><div class="header"><!--  上边包含收缩的导航条 --><navbar @showSetting="openSetting"></navbar><tags-view></tags-view></div><div class="app-main"><app-main></app-main></div></div><right-panel v-model="setting" title="设置"><!-- 设置功能 --><Settings></Settings></right-panel></div>
</template><script lang="ts" setup>
const setting = ref(false);
const openSetting = () => {setting.value = true;
};
</script>
<style lang="scss" scoped>
.app-wrapper {@apply flex w-full h-full;.sidebar-container {// 跨组件设置样式@apply bg-[var(--menu-bg)];:deep(.sidebar-container-menu:not(.el-menu--collapse)) {@apply w-[var(--sidebar-width)];}}.main-container {@apply flex flex-col flex-1 overflow-hidden;}.header {@apply h-84px;.navbar {@apply h-[var(--navbar-height)] bg-yellow;}.tags-view {@apply h-[var(--tagsview-height)] bg-blue;}}.app-main {@apply bg-cyan;min-height: calc(100vh - var(--tagsview-height) - var(--navbar-height));}
}
</style>

2 主题设置方法

2.1 修改 Style

在 src/style 下，添加默认主题色，分别修改 variables.module.scss 和 variables.module.scss.d.ts，代码如下：

//variables.module.scss
$sideBarWidth: 210px;
$navBarHeight: 50px;
$tagsViewHeight: 34px;// 导航颜色
$menuText: #bfcbd9;
// 导航激活的颜色
$menuActiveText: #409eff;
// 菜单背景色
$menuBg: #304156;
$theme: #409eff;:export {menuText: $menuText;menuActiveText: $menuActiveText;menuBg: $menuBg;theme: $theme;
}

//variables.module.scss.d.ts
interface IVaraibles {menuText: string;menuActiveText: string;menuBg: string;theme: string;navBarHeight: string;tagsViewHeight: string;
}export const varaibles: IVaraibles;
export default varaibles;

2.2 添加 settings Store

在 src/stores 下新建 settings.ts，代码如下：

//src/stores/settings.ts
import varaibles from "@/style/variables.module.scss";// 定义一个名为 "setting" 的 Vuex 存储，用于管理应用的设置
export const useSettingStore = defineStore("setting",() => {// 如果选择的是同样的主题颜色，就不更改，节省const settings = reactive({theme: varaibles.theme, //当前选择的颜色originalTheme: "" //正在应用的颜色});type ISetting = typeof settings;// 定义一个方法来更改设置const changeSetting = <T extends keyof ISetting>({key,value}: {key: T;value: ISetting[T];}) => {settings[key] = value;};return { changeSetting, settings };},{persist: {storage: sessionStorage, // 使用 sessionStorage 作为持久化存储pick: ["settings.theme"] // 持久化 settings 对象中的 theme 属性}}
);

2.3 安装 css-color-function

查看 Element Plus 源码（如下图，详细代码感兴趣的可以自己去看看源码），可以发现它是用 --el-color-#{$type} 、--el-color-#{$type}-light-{$i} 来设置基础颜色的，我们只需要修改这两个变量对应的颜色，就可以更换主题了。

要生成以上两个变量的形式，我们需要借助一个库 css-color-function，使用 pnpm 安装，代码如下：

pnpm i css-color-function

在 src/vite-env.d.ts中添加声明，增加 ts 提示，代码如下：

/// <reference types="vite/client" />declare module "element-plus/dist/locale/en.mjs";
declare module "element-plus/dist/locale/zh-cn.mjs";declare module "css-color-function" {export function convert(color: string): string;
}

2.4 color 公共方法

在 src/utils 下新建 color.ts，封装生成和设置主题颜色的方法，代码如下：

//src/utils/color.ts
// 引入 css-color-function 库，该库用于处理 CSS 颜色函数表达式
import cssFunc from "css-color-function";// 定义一个对象 formula，用于存储颜色生成公式
// 每个属性名代表生成的颜色名称，属性值是一个 CSS 颜色函数表达式
// "xxx" 是一个占位符，后续会被实际的主色调替换
// tint 函数用于将颜色变亮，括号内的百分比表示变亮的程度
const formula: { [prop: string]: string } = {"primary-light-1": "color(xxx tint(10%))","primary-light-2": "color(xxx tint(20%))","primary-light-3": "color(xxx tint(30%))","primary-light-4": "color(xxx tint(40%))","primary-light-5": "color(xxx tint(50%))","primary-light-6": "color(xxx tint(60%))","primary-light-7": "color(xxx tint(70%))","primary-light-8": "color(xxx tint(80%))","primary-light-9": "color(xxx tint(90%))"
};// 定义一个函数 generateColors，用于根据主色调生成一系列变亮的颜色
// 参数 primary 是传入的主色调，通常是一个有效的 CSS 颜色值
const generateColors = (primary: string) => {// 定义一个空对象 colors，用于存储生成的颜色const colors: Record<string, string> = {};// 遍历 formula 对象的每个键值对Object.entries(formula).forEach(([key, v]) => {// 将颜色公式中的占位符 "xxx" 替换为实际的主色调const value = v.replace(/xxx/g, primary);// 使用 cssFunc.convert 方法将颜色函数表达式转换为实际的 CSS 颜色值// 并将生成的颜色存储到 colors 对象中，键为颜色名称，值为实际颜色值colors[key] = cssFunc.convert(value);});// 返回生成的颜色对象return colors;
};// 定义一个函数 setColors，用于将生成的颜色设置为 HTML 根元素的自定义属性
// 参数 colors 是一个对象，包含颜色名称和对应的实际颜色值
const setColors = (colors: Record<string, string>) => {// 获取 HTML 根元素const el = document.documentElement;// 遍历 colors 对象的每个键值对Object.entries(colors).forEach(([key, value]) => {// 使用 el.style.setProperty 方法将颜色值设置为根元素的自定义属性// 自定义属性的名称为 --el-color- 加上颜色名称el.style.setProperty(`--el-color-${key}`, value);});
};// 导出 generateColors 和 setColors 函数，以便在其他模块中使用
export { generateColors, setColors };

‌2.5 设置主题

在 src 下新建 hooks 文件夹，新建 useGenerateTheme.ts 文件，用于监控主题颜色变化并设置主题颜色，代码如下：

//src/hooks/useGenerateTheme.ts 
// 从 @/stores/settings 模块中导入 useSettingStore 函数，该函数用于获取设置状态的存储实例
import { useSettingStore } from "@/stores/settings";
// 从 @/utils/color 模块中导入 generateColors 和 setColors 函数
// generateColors 用于根据主色调生成一系列变亮的颜色
// setColors 用于将生成的颜色设置为 HTML 根元素的自定义属性
import { generateColors, setColors } from "@/utils/color";// 定义一个组合式函数 useGenerateTheme，用于处理主题生成和更新逻辑
export const useGenerateTheme = () => {// 通过调用 useSettingStore 函数获取设置状态的存储实例const store = useSettingStore();const theme = computed(() => store.settings.theme);const originalTheme = computed(() => store.settings.originalTheme);// 使用 watchEffect 函数创建一个副作用函数，该函数会在其依赖项发生变化时自动执行watchEffect(() => {// 检查当前的主题值 theme.value 是否与原始主题值 originalTheme.value 不同if (theme.value !== originalTheme.value) {// 如果主题值发生了变化，生成新的颜色对象const colors = {// 将当前主题颜色作为主色调primary: theme.value,// 调用 generateColors 函数，根据当前主题颜色生成一系列变亮的颜色// 并将这些颜色合并到 colors 对象中...generateColors(theme.value)};// 调用 setColors 函数，将生成的颜色对象应用到 HTML 根元素的自定义属性上// 从而实现主题颜色的更新setColors(colors);// 调用存储实例的 changeSetting 方法，更新存储中的原始主题值// 使其与当前主题值保持一致store.changeSetting({ key: "originalTheme", value: theme.value });}});// 此函数的主要目的是生成主题颜色并将其应用到 HTML 根元素上// 以实现主题的动态更新
};

2.6 页面引入

在 App.vue 中引入 useGenerateTheme.ts 进行应用，代码如下：

//src/App.vue
<template><el-config-provider :size="store.size" :locale="locale"><router-view></router-view></el-config-provider>
</template><script lang="ts" setup>
import { useAppStore } from "./stores/app";
import en from "element-plus/dist/locale/en.mjs";
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
import { useGenerateTheme } from "@/hooks/useGenerateTheme";
const language = ref("zh-cn");
const locale = computed(() => (language.value === "zh-cn" ? zhCn : en));const store = useAppStore();useGenerateTheme(); // watch主题
</script>

3 组件应用

3.1 Element 组件

完成文章前面的步骤后，Element 组件都可以在选择主题后，自动变化主题颜色了。效果如下：

3.2 自定义组件

自定义组件要使用主题切换，需要在组件中进行添加，示例如下：

示例1：

修改 TagsView 组件，添加主题部分，因原代码太长，省略其他后的代码如下：

<template><div class="tags-view-container"><el-scrollbar w-full whitespace-nowrap><router-linkclass="tags-view-item"v-for="(tag, index) in visitedViews":class="{active: isActive(tag)}":style="{backgroundColor: isActive(tag) ? theme : '',borderColor: isActive(tag) ? theme : ''}":key="index":to="{ path: tag.path, query: tag.query }"><!-- 省略其他代码 --></router-link></el-scrollbar></div>
</template><script lang="ts" setup>
import { useTagsView } from "@/stores/tagsView";
import type {RouteLocationNormalizedGeneric,RouteRecordRaw
} from "vue-router";
import { join } from "path-browserify";
import { routes } from "@/router/index"; //从应用的路由配置文件中导入了所有的路由定义
import { useSettingStore } from "@/stores/settings";
//...省略其他代码...
const isActive = (tag: RouteLocationNormalizedGeneric) => {return tag.path === route.path;
};
//...省略其他代码...
const settingsStore = useSettingStore();
const theme = computed(() => settingsStore.settings.theme);
</script><style scoped>
//...省略其他代码...
</style>

示例2：

修改 Sidebar 组件，添加主题部分，完整代码如下：

//src/layout/components/Sidebar/index.vue
<template><div><el-menuclass="sidebar-container-menu"router:default-active="defaultActive":background-color="varaibles.menuBg":text-color="varaibles.menuText":active-text-color="theme":collapse="sidebar.opened"><sidebar-itemv-for="route in routes":key="route.path":item="route":base-path="route.path"/><!-- 增加父路径，用于el-menu-item渲染的时候拼接 --></el-menu></div><!-- :collapse="true" -->
</template><script lang="ts" setup>
import { useAppStore } from "@/stores/app";
import varaibles from "@/style/variables.module.scss";
import { routes } from "@/router";
import { useSettingStore } from "@/stores/settings";const route = useRoute();const { sidebar } = useAppStore();const defaultActive = computed(() => {// .....return route.path;
});const settingsStore = useSettingStore();
const theme = computed(() => settingsStore.settings.theme);
</script><style scoped></style>

完成后，页面效果如下：

以上，就是主题切换的全部内容。

下一篇将继续探讨 tagsView 切换设置，敬请期待~