动态主题

动态样式文件

改变皮肤link元素的href地址。例如：

<link id="skinLink" href="skin-default.css" rel="stylesheet" type="text/css">

换皮肤的时候JS改变href属性值：

skinLink.href = "skin-red.css";

webpack-theme-color-replacer

在 m-fe-rtw,基于React & TypeScript & Webpack的微前端复杂应用项目模板中，我们使用了webpack-theme-color-replacer。webpack-theme-color-replacer在Webpack构建时，在emit事件（准备写入dist结果文件时）中，将即将生成的所有CSS文件的内容中带有指定颜色的CSS规则单独提取出来，再合并为一个theme-colors.css输出文件。然后在切换主题色时，下载这个文件，并替换为需要的颜色，应用到页面上。这样，下载的样式中就只包含颜色相关的CSS规则，文件较小；同时它已经包含了项目中所有的CSS中的指定颜色样式，一次下载全部颜色样式都搞定。首先我们添加替换插件：

new ThemeColorReplacer({
  fileName: "theme-colors-[contenthash:8].css",
  matchColors: getAntdSerials("#5d4bff"), // 主色系列
  // 改变样式选择器，解决样式覆盖问题
  changeSelector(selector) {
    switch (selector) {
      case ".ant-calendar-today .ant-calendar-date":
        return ":not(.ant-calendar-selected-date)" + selector;
      case ".ant-btn:focus,.ant-btn:hover":
        return ".ant-btn:focus:not(.ant-btn-primary),.ant-btn:hover:not(.ant-btn-primary)";
      case ".ant-btn.active,.ant-btn:active":
        return ".ant-btn.active:not(.ant-btn-primary),.ant-btn:active:not(.ant-btn-primary)";
      default:
        return selector;
    }
  },
});

该插件会生成一个CSS文件：

.el-tag {
  color: #f67a17;
}

.el-tag.is-hit {
  border-color: #f67a17;
}

并且在Runtime中插入如下代码：

window.__theme_COLOR_cfg = {
  url: "theme-colors-05d50e3a.css",
  colors: [
    "#5d4bff",
    // ...
  ],
};

这样就能获得到某个颜色对应的元素ID，在执行颜色切换的时候，直接调用Client的client.changer.changeColor(options, Promise);changeColor方法：

// 首先判断 theme-colors.css 是否已经被插入到了文档，如果未插入则执行拉取然后再插入
setCssTo(elStyle, elStyle.innerText);

// 执行 Style 内置替换
function setCssTo(elStyle, cssText) {
  cssText = _this.replaceCssText(cssText, oldColors, newColors);
  elStyle.color = newColors.join("|");
  elStyle.innerText = cssText;
  theme_COLOR_config.colors = newColors;
}

// 直接全局替换样式方式进行切换
function replaceCssText(cssText, oldColors, newColors) {
  oldColors.forEach(function (color, t) {
    cssText = cssText.replace(
      new RegExp(color.replace(/,/g, ",\\s*"), "ig"),
      newColors[t]
    ); // 255, 255,3
  });
  return cssText;
}

alternate

<link href="reset.css" rel="stylesheet" type="text/css">

<link href="default.css" rel="stylesheet" type="text/css" title="默认">

<link href="red.css" rel="alternate stylesheet" type="text/css" title="红色">

<link href="green.css" rel="alternate stylesheet" type="text/css" title="绿色">

上面4个 <link> 元素，共出现了3中不同性质的CSS样式文件加载：

没有title属性，rel属性值仅仅是stylesheet的 <link> 无论如何都会加载并渲染，如reset.css；
有title属性，rel属性值仅仅是stylesheet的作为默认样式CSS文件加载并渲染，如default.css；
有title属性，rel属性值同时包含alternate stylesheet的作为备选样式CSS文件加载，默认不渲染，如red.css和green.css；

这里有个非常有趣的特性，那就是rel=“stylesheet"的如果有title属性并有值，性质上就变成了一个可以控制其渲染或者不渲染的特殊元素了。

使用JavaScript代码修改元素DOM对象的disabled值为false，可以让默认不渲染的CSS开始渲染。注意，必须是DOM元素对象的disabled属性，而不是HTML元素的disabled属性，元素是没有disabled属性的。

// 渲染 red.css 这个皮肤
document.querySelector('link[href="red.css"]').disabled = false;

动态主题

动态主题

动态样式文件

webpack-theme-color-replacer

alternate

全局变量

Links