自定义主题

盘古PC脚手架支持用户自定义主题设置

实现方案

通过css变量控制主题切换，通过设置arco-theme不同的属性值控制不同主题色显示的变量，详见：样式变量

具体实现

添加自定义主题类型

src/store/pangea/theme.ts中的themeList增加自定义的主题类型 例：增加一个类型demo-red

{
  key: "demo-red",
  value: "红色"
}

设置主题类型下的样式变量

src/assets/theme/theme.less中设置主题样式变量，基于不同的主题模式设置不同的色值

body[arco-theme="demo-red"] {   
  // 红色主题下的变量值   
  --primary-6: 255, 0, 0; 
}

项目样式改造

因主题切换基于样式变量，所以项目中所有的高低代码的页面，只要是涉及到固定色值的样式都需要调整为使用样式变量进行色值设置（固定色值，主题切换时色值不变的情况除外）