基于第三方组件主题修改

1. 调用修改主题方法，通常结合 localStorage 来使用

updateTheme("theme");

2. 方法调用，通过 root 设置变量 + 手动注入页面 less

import { setThemeColor } from "@/utils/themeConfig";

let lessNodesAppended;

const colorList = [
  {
    key: "薄暮",
    type: "huaxia",
    color: "#EA2927",
    rgb: { r: 234, g: 41, b: 39 },
    fontRgb: { r: 51, g: 51, b: 51 },
    btnRight: { r: 255, g: 94, b: 92 },
    menu: { r: 234, g: 41, b: 39, a: 0.2 },
    menuRgb: { r: 234, g: 41, b: 39 },
  },
  {
    key: "邮政",
    type: "postOffice",
    color: "#176177",
    rgb: { r: 23, g: 97, b: 119 },
    fontRgb: { r: 51, g: 51, b: 51 },
    btnRight: { r: 12, g: 46, b: 83 },
    menu: { r: 23, g: 97, b: 119, a: 0.2 },
    menuRgb: { r: 2, g: 229, b: 243 },
  },
];

const updateTheme = (primaryColor) => {
  if (!primaryColor) {
    return;
  }
  const vagueColor = colorList.find((it) => it.type === primaryColor);
  setThemeColor(vagueColor);
  // const hideMessage = message.loading('正在编译主题！', 0)
  // console.info(`正在编译主题!`)
  function buildIt() {
    // 正确的判定less是否已经加载less.modifyVars可用
    if (!window.less || !window.less.modifyVars) {
      return;
    }
    // less.modifyVars可用
    window.less
      .modifyVars({
        "@primary-color": primaryColor,
      })
      .then(() => {
        // hideMessage()
      })
      .catch(() => {
        // hideMessage()
      });
  }
  if (!lessNodesAppended) {
    // insert less.js and color.less
    const lessStyleNode = document.createElement("link");
    const lessConfigNode = document.createElement("script");
    const lessScriptNode = document.createElement("script");
    lessStyleNode.setAttribute("rel", "stylesheet/less");
    lessStyleNode.setAttribute("href", __webpack_public_path__ + "color.less");
    lessConfigNode.innerHTML = `
      window.less = {
        async: true,
        env: 'production',
        javascriptEnabled: true
      };
    `;
    lessScriptNode.src =
      "https://gw.alipayobjects.com/os/lib/less.js/3.8.1/less.min.js";
    lessScriptNode.async = true;
    lessScriptNode.onload = () => {
      buildIt();
      lessScriptNode.onload = null;
    };
    document.body.appendChild(lessStyleNode);
    document.body.appendChild(lessConfigNode);
    document.body.appendChild(lessScriptNode);
    lessNodesAppended = true;
  } else {
    buildIt();
  }
};

3. 设置 root

export const setThemeColor = function (vagueColor) {
  const whiteRgb = { r: 255, g: 255, b: 255 }
  let root = document.querySelector(':root') as any

  root.style.setProperty('--theme-bg-color', rgba(whiteRgb, 1)) // 背景颜色
  root.style.setProperty('--theme-color', rgba(vagueColor.rgb, 1)) // 主题颜色
  root.style.setProperty('--theme-secondary-color', rgba({ r: 246, g: 246, b: 246 }, 1)) // 主题底色色
  root.style.setProperty('--theme-btn', rgba(vagueColor.rgb, 1)) // 主题按钮色
  root.style.setProperty('--theme-size', rgba(vagueColor.fontRgb, 1)) // 主题文字颜色
  root.style.setProperty('--theme-size-title', rgba(vagueColor.fontRgb, 1)) //  主题标题颜色
  root.style.setProperty('--theme-interactive-color', rgba(vagueColor.rgb, 1)) // 主题交互色
  root.style.setProperty('--theme-table-thead-bg', rgba({ r: 249, g: 249, b: 249 }, 1))
  root.style.setProperty('--theme-table-hover', rgba(vagueColor.rgb, 0.1)) // 表格hover
  root.style.setProperty('--theme-table-border', rgba({ r: 233, g: 233, b: 233 }, 1)) // 表格border
  root.style.setProperty('--theme-input-bg', rgba(whiteRgb, 1)) // input 等筛选条件 背景色
  root.style.setProperty('--theme-input-border', rgba({ r: 233, g: 233, b: 233 }, 1)) // input border
  root.style.setProperty('--theme-vague', rgba(vagueColor.rgb, 0.38))
  root.style.setProperty('--theme-vague-btn', rgba(vagueColor.rgb, 0.3))
  root.style.setProperty('--theme-btn-r', rgba(vagueColor.rgb, 1))
  root.style.setProperty('--theme-btn-l', rgba(vagueColor.btnRight, 0.8))
  root.style.setProperty('--theme-btn-r-hover', rgba(vagueColor.rgb, 0.8))
  root.style.setProperty('--theme-btn-l-hover', rgba(vagueColor.btnRight, 0.5))
  root.style.setProperty('--theme-btn-1', rgba(vagueColor.rgb, 0.1))
  root.style.setProperty('--theme-btn-8', rgba(vagueColor.rgb, 0.8))
  root.style.setProperty('--theme-menu-check-bg', rgba(vagueColor.menu, vagueColor.menu.a))
  root.style.setProperty('--theme-menu-size-active', rgba(vagueColor.menuRgb, 1));
  root.style.setProperty('--theme-logo', rgba(vagueColor.rgb, 1));
  if (vagueColor.type == 'huaxia') {
    root.style.setProperty('--theme-menu-start', 'rgba(255, 255, 255, 1)');
    root.style.setProperty('--theme-menu-end', 'rgba(255, 255, 255, 1)');
    root.style.setProperty('--theme-menu-size-color', 'rgba(0, 0, 0, 0.8)');
  } else {
    root.style.setProperty('--theme-menu-start', rgba(vagueColor.rgb, 1));
    root.style.setProperty('--theme-menu-end', rgba(vagueColor.btnRight, 0.8));
    root.style.setProperty('--theme-menu-size-color', 'rgba(255, 255, 255, 1)');
  }

  // --theme-bg-color: rgb(255, 255, 255);
  // --theme-color: rgba(234, 41, 39, 1);
  // --theme-secondary-color: rgba(246, 246, 246, 1);
  // --theme-btn: rgba(234, 41, 39, 1);
  // --theme-size: rgba(51, 51, 51, 1);
  // --theme-size-title: rgba(51, 51, 51, 1);
  // --theme-interactive-color: rgba(234, 41, 39, 1);
  // --theme-table-thead-bg: rgba(249, 249, 249, 1);
  // --theme-table-hover: rgba(234, 41, 39, 0.1);
  // --theme-table-border: rgba(233, 233, 233, 1);
  // --theme-input-bg: rgba(255, 255, 255, 1); //
  // --theme-input-border: rgba(233, 233, 233, 1);
  // --theme-vague: rgba(234, 41, 39, 0.38); // 通用阴影
  // --theme-vague-btn: rgba(234, 41, 39, 0.3); // 按钮阴影
  // --theme-btn-1: rgba(234, 41, 39, 0.1); // 主题按钮色
  // --theme-btn-8: rgba(234, 41, 39, 0.8); // 主题按钮色
  // --theme-btn-l: rgba(234, 41, 39, 1); // 主题按钮色
  // --theme-btn-r: rgba(255, 94, 92, 1);; // 主题按钮色
}
function rgba(rgb, a) {
  return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${a})`
}