vue3 后台管理框架geeker admin -- 全局初始化主题上(了解)
0 环境
1 参考文档
2 前言
要想在线看源码的，请点开上面的参考文档 App.vue查看具体源码，本地的源码位置：src/App.vue，下面我就会直接用App.vue替代了。而我们主要讲的是init theme就是App.vue的第21-22行，点进去也就是useTheme.ts下的initTheme，下面我会直接说它的。
3 分析代码
initTheme三行代码，如下图：
1 switchDark
1 html设置dark类名
从globalStore中拿到isDark的值，若是true，html加个dark的类名，否则类名为空。
而控制这个isDark，比如在登录页上的开关按钮(首页的布局设置也可以设置，属于header里的内容)。如下图：
找到src/views/login/index.vue，第第四行，SwitchDark组件，这里class类名和上面的dark不同，它的目的是绝对定位在右上角(用来固定位置用的)，如下图：
SwitchDark组件点进去，el-switch应该很熟悉吧，不清楚的看上面Switch 开关链接。如下图：
这里的change事件绑定了switchDark，el-switch控制着isDark的值。
看下图的文档，开关按钮外边两边各自加了个图标，而inline-prompt将其加在按钮内。
对比两种不同模式，如下两张图：
可以看到边框、背景和登录表单都变色，在哪里设置的呢(看上面自定义 element 暗黑模式那个链接或者src/styles/element-dark.scss)。看下图，不用我解释了吧：
2 changePrimary(修改主题颜色)
如下图：
changePrimary(primary.value);若没有传值，进入!val的判断(30-33行)，第35行设置默认颜色(#009688是中等暗度的青色阴影)给val，并且提示重置为什么颜色。html style中加入--el-color-primary，它的值颜色(primary.value或者DEFAULT_PRIMARY)。第36-39行根据isDark的值，若为真，颜色是变浅，否则颜色变深。第40-43行和上面的类似，多了一个控制深浅的变量和--el-color-primary-light-(1~9)，对应从1到9。第44行globalStore给primary赋值val的值。
稍微提一下：getLightColor，它将判断是不是十六进制，通过后，将其拆成数组有3个元素，每个元素存的是两个字符串，然后遍历将其转为十进制。因为rgb是为了level的计算(这里是255level和已有的值剩余level，得到新的值)，等计算完了，在转回十六进制。getDarkColor很类似就是level的计算的地方不一样罢了。
4 总结
黑白模式变换，页面颜色跟着变换，且加载不同主题颜色，都是放在html上的。还有这里用到了颜色深浅度的转化，它转换的重点在于：
getLightColor和getDarkColor代码注释了，变浅颜色值，加深颜色值，变浅加深的实现是255和20.5*level的那行代码，而那行代码是需要在rgb下进行的，也就说需要将十六进制先转成十进制，在计算好了后，在将其转成十六进制进行显示，但是十六进制和十进制来回转换，是不是怪麻烦的，就不能直接rgb一条龙么，我想可以的，完全可以自行实现的，但我估计着应该是使用十六进制，它会更方便些吧。
转载自:https://juejin.cn/post/7382074040645582860