Web 站点动态主题切换实现

create:October 16, 2021 update:April 12, 2022 • ☕️ 3 min read

同步链接: https://www.shanejix.com/posts/Web 站点动态主题切换实现/

最近调研 web 站点动态主题切换的实现，记录如下

hack: replacement css file

站点维护多套主题，动态替换不同主题文件

<!-- 主题样式 -->
<link href="theme.css" rel="stylesheet" type="text/css" />

<!-- 方法一：替换 href -->
<link href="another-theme.css" rel="stylesheet" type="text/css" />

<!-- 方法二：通过 alternate 属性控制 -->
<link href="theme.css" rel="stylesheet" type="text/css" />
<link href="another-theme.css" rel="stylesheet" type="text/css" alternate />

less modifyVars

在客户端加载 less 通过的 less 的 modifyVars 在浏览器中动态修改主题

在入口 index.html 引入 less.min.js

<script type="text/javascript" src="/static/less.min.js" />

<!-- or -->

<script type="text/javascript" src="//xx.cdn.less.min.js" />

在入口 index.html 引入主题色文件

<link rel="stylesheet/less" type="text/css" href="/static/theme.less" />

theme.less

@primaryColor: red;

.page {
  backgroud: @primaryColor;
  color: @primaryColor;
}

动态修改主题

handleColorChange (color) {
    less.modifyVars({
        '@primaryColor':color
    })
    .then(() => {
         console.log('修改成功');
    });
};

demo:

https://github.com/shanejix/front-end-playground/tree/master/web/dynamic-theme

css variable

对于现代浏览器，css 变量是一种更廉价的动态更改主题的方式（不支持 IE 11）

定义主题变量（注意全局变量定义在根元素上）

:root {
  --primaryColor: red;
}

.page {
  backgroud: var(--primaryColor);
  color: var(--primaryColor);
}

动态更改主题

// 替换变量值
document.body.style.setProperty("--primaryColor", "blue");

// or

// 动态加载不同主题变量

小结

可以看出，上述的思想都是一致的，要么替换文件要么修改变量。巧的是，antd 在最新的版本中也支持了动态主题，其思路是直接将 less 中的变量转化为 css variables 挂在全局。可以学习下 https://github.com/ant-design/ant-design/pull/31496

references

作者：shanejix 出处：https://www.shanejix.com/posts/Web 站点动态主题切换实现/ 版权：本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。声明：转载请注明出处！

Edit on GitHub • Discuss on GitHub