项目主题背景切换_document.documentelement.style.setproperty('--bg-c

首先再全局css文件中定义变量

:root {
  --varColor: #00e0ff;
  --varSxColor: #1f334a;
  --selectHoverColor: rgb(13, 58, 99);
  --bgBlockStyle: #0c1d36; //基础的主色调
  --varinputBorderColor: #3d4a5e;
  --varInputBackground: #10253f;
  --tableTopColor: #31495e; //表头颜色
  --modelDark: #040b22; //暗黑模式下的整体背景色
  --btnPrimary: #068295; //按钮颜色
  --titlePrimary: #c3f8ff;
  --boxBorderRdius: 5px; //表格小圆角
  --Padding20: 20px; //内边距
  // 字体大小变量
  --fontSizeSmall: 14px; //字体大小小版的
  --fontSizeCenter: 16px; //字体大小中版的
  --fontSizeBig: 18px; //字体大小中版的
  // 图标大小
  // 小版
  --iconSizeSmall: 20px;
  // 大版
  --iconSizeBig: 30px;
  // 白色字体
  --fontColorWhite: white;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

注意再下面开发用到的大多样式颜色都从改变量中取
切换背景色即点击按钮触发事件动态获取该变量来修改颜色，实现切换背景色
缺点是刷新页面会回到最原始的主题，可存本地加监听来实现刷新保持主题

//切换主题色
function setVarStyl() {
document.documentElement.style.setProperty("--varColor", "black");
document.documentElement.style.setProperty("--bgBlockStyle", "green");
document.documentElement.style.setProperty("--fontColorWhite", "white");
}
1
2
3
4
5
6

第二种思路配置主题对应css文件，例假如三个主题，对应三个样式css文件，选择主题切换css文件导入也可