model.js

// ---配置各主题对应的颜色
export const themes = {
  default: {
    white: `#fff`,
    black: `#000`,
    borderRadiusMid: `12px`,
    borderRadiusSm: `4px`,
    headingColor: `rgba(0, 0, 0, .85)`,
    // grey
    grey2: `#e5e5e5`, // 颜色和 theme/index.less 对应
    grey8: `#333333ff`,
    grey16: `#858585`,
    grey17: `#e5e5e5ff`,
    // blue
    blue12: `#ECF7FF`,
    blue13: `#18a0fb`,
    disabledColor: `rgba(0, 0, 0, .25)`,
    skeletonColor: `#f2f2f2`,
    layoutHeaderBackgroundLinear: `linear-gradient(180deg, #fbfbfcff 0%, #e6e6e8ff 100%)`,
  },
};

style.less

// -- 默认的主题颜色

@white: var(--white);
@black: var(--black);
@borderRadiusMid: var(--borderRadiusMid);
@borderRadiusSm: var(--borderRadiusSm);
@headingColor: var(--headingColor);
@grey2: var(--grey2);
@grey8: var(--grey8);
@grey16: var(--grey16);
@grey17: var(--grey17);
@blue12: var(--blue12);
@blue13: var(--blue13);
@disabledColor: var(--disabledColor);
@skeletonColor: var(--skeletonColor);
@layoutHeaderBackgroundLinear: var(--layoutHeaderBackgroundLinear);
// 导出变量
:export {
  name: "less";
  white:@white;
  black:@black;
  borderRadiusMid:@borderRadiusMid;
  borderRadiusSm:@borderRadiusSm;
  headingColor:@headingColor;
  grey2:@grey2;
  grey8:@grey8;
  grey16:@grey16;
  grey17:@grey17;
  blue12:@blue12;
  blue13:@blue13;
  disabledColor:@disabledColor;
  skeletonColor:@skeletonColor;
  layoutHeaderBackgroundLinear:@layoutHeaderBackgroundLinear;
}

theme.js

// -----切换主题方法
import { themes } from './modal.js';

// 修改页面中的样式变量值
const changeStyle = obj => {
  for (let key in obj) {
    document.getElementsByTagName('body')[0].style.setProperty(`--${key}`, obj[key]);
  }
};
export const setTheme = (themeName, themeData) => {
  const themeConfig = themes[themeName];
  // 如果有主题名称，那么则采用我们定义的主题
  if (themeName === 'custom') {
    changeStyle(themeData);
  } else if (themeConfig) {
    changeStyle(themeConfig); // 改变样式
  }
};

挂载到body上是这个样子

每个样式都使用的变量