DAY1 2025.1.20 增加颜色切换
今日任务：给kmoke增加“暗色/亮色切换”功能
完成情况：基本完成
思路：
1.定位：先通过router定位到自己想改（增加“切换模式”按钮）的界面，这个界面一般是一个层级较高的父路由，父路由的component一般作为公共组件，在此为layout->header组件
2.看css写法：发现此项目中，入口main.js处，根组件#app的vue实例引入外置的scss文件（名字：颜色，如--main-color:#123456），因此在内部某组件使用css的时候类似以下写法background-color:var(--main-color)
3.进一步思路：使用document相关api完成，document代表DOM的根对象，也就是整个html文档，document.documentElement代表DOM文档树的根元素（打开开发者工具，一般对应最外层的html节点）。vue是单文件组件，和多文件组件不同的是，vue对DOM树进行局部改动，保证DOM树本质上不变（所以vue一直在访问同一个html界面）。因此document树根元素一直不变。由于在main.js中引入全局scss，所以这个scss被添加到整个html文档，因此作用域为全局。只需更改这些全局scss变量（并改回）就可以实现颜色改变功能。
4.具体实现：
①document.documentElement（定位到根元素html）.style.setProperty(css属性名，新值)
setProperty对一个DOM元素使用，将参数第一位的css属性更改为参数第二位的新值
②为实现批量更改，体现代码可复用性，优雅的优化
*1：将‘css属性名‘，’新值’构造成为
data(){
return(){
differentMode:{
lightMode:
{css属性值1:新值1，
{css属性值2:新值2，}，
darkMode：
{css属性值:‘新值’，},
}}
*2：用differentMode[lightMode]选择对应的对象，这叫JS的对象属性访问语法，JS会查找对象中与该字符串匹配的属性名，并返回对应的值
const mode=differentMode[lightmode]
*3：Object.entries(mode).forEach(([variable,value])=>{document.documentElement.style.setProperty(variable,value)})
解释：Object.entries(mode)将mode对象转换成键值对数组，这个方法将对象的所有可枚举属性转换成键值对数组。接下来使用数组的.forEach()函数，参数是（number，index，array），这里只用第一个参数number，说明第一个数组是[variable,value]，这种写法是ES6新值的解构赋值语法，相当于把key赋值给变量variable。number赋值给变量value，再用setProperty方法更改对应元素（在此为根元素）即可。
5.在添加一些逻辑状态变量，实现样式的切换和换回。
