先创建几套主题颜色的css文件,这里是在public下

 日间主题长这样,css写在root下,自己还需要什么颜色自己可以定义

/*日间模式*/
:root {
	--menuBg: #3367F5;
	--menuHover: #263445;
}

夜间主题

/*夜间模式*/
:root {
	--menuBg: #020D26;
	--menuHover: #263445;
}

注意:日间夜间里面字段一定要对应,简单的讲就是,日间里面有--menuBg,那么夜间里面也要有,只是后面跟的颜色不同

之后在pubilc文件下的index.html 下引入

  <!--皮肤-->
  <link id="skin" rel="stylesheet" type="text/css" href="./skin/day.css">

别忘了定义id

之后呢,在你点击切换主题的事件里,获取id,去修改它,引入不同的css文件就ok了

document.head.querySelector('#skin').setAttribute('href', `./skin/${skinType}.css`)

补充:这种css定义的样式在页面上这么用,然后在你切换主题时,后面的样式也会发生变化