vue3 后台管理框架geeker admin -- 全局初始化主题中(了解)

0 环境

• Node.js 16.x+
• pnpm 7.x+
• Git

1 参考文档

geeker admin官方文档

element-plus官方文档

vue router官方文档

App.vue

useTheme.ts

aside.ts、header.ts、menu.ts

2 前言

要想在线看源码的，请点开上面的参考文档 App.vue查看具体源码，本地的源码位置：src/App.vue，下面我就会直接用App.vue替代了。而我们主要讲的是init theme就是App.vue的第21-22行，点进去也就是useTheme.ts下的initTheme，下面我会直接说它的，直接说看第几行说的就是这个文件了。

3 已进行部分

initTheme三行代码，如下图：

只完成到switchDark下的changePrimary(20-23行)。待完成24-25行，以及剩余的。

4 setAsideTheme

如下图代码：默认type:light，若是asideInverted为true，type = "inverted"，这里是指侧边栏颜色变为深色模式，下面的setMenuTheme也有类似的判断。看下图我截的红色的框框位置。若是暗黑模式，type = "dark"。判断得到哪个模式了，需要将其取出来，看const theme = asideTheme[type!];，这里强调type不会是为空，必然有个值的，asideTheme是在aside.ts中的，想在线看的，上面有链接，也可以看下面我截的图，看asideTheme的代码，这里有个Record，限制了只能type这三个类型，因为我没有任何设置，默认的type=light，拿到的是light对象，看下面的截图。遍历这个对象，拿到key、value，将其加载到style中。

5 setMenuTheme

setAsideTheme最后调用了setMenuTheme，并且setHeaderTheme(设置头部样式)也会用到，就单独抽离出来了说它了。看下图的代码：

默认设置type=light，这里的type=inverted，有两行判断，先看看第63行，layout是横向模式且headerInverted(看上面setAsideTheme里的一张截图，关于布局样式的，然后找到布局样式里的头部反转色，设为深色模式)为真，再看64行，layout不是横向模式且asideInverted(侧边栏颜色变为深色模式时)为真。为啥要这样判断呢，盲猜横向的时候，不需要侧边栏，而纵向的时候，不需要头部样式，等到时候，具体分析布局样式的代码时，看看猜的对否。下面的代码是不是很熟悉了，区别就在于这里的menuTheme是在menu.ts里的，拿到相应的对象。然后遍历放到style上。

6 setHeaderTheme

setAsideTheme结束了，继续setHeaderTheme，现在看第86-93行，代码逻辑和setAsideTheme类似，这里的加载style的key、value来自header.ts下headerTheme。其它的类似，至于再次调用setMenuTheme，应该是为了到时候改布局样式的时候，单单影响到setHeaderTheme，那么没必要在更新setAsideTheme，反之亦然。

7 总结

随着type的值发生了变换，对应的它的主题也会随着被改变，并且更新到style中或者class类名里，不过这里的深色模式一般不太改，了解它做了什么就行。