Loading

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 在浏览器中动态修改主题

  1. 在入口 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" />
  1. 在入口 index.html 引入主题色文件
<link rel="stylesheet/less" type="text/css" href="/static/theme.less" />
  1. theme.less
@primaryColor: red;

.page {
  backgroud: @primaryColor;
  color: @primaryColor;
}
  1. 动态修改主题
handleColorChange (color) {
    less.modifyVars({
        '@primaryColor':color
    })
    .then(() => {
         console.log('修改成功');
    });
};

demo:

css variable

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

  1. 定义主题变量（注意全局变量定义在 根元素上）
:root {
  --primaryColor: red;
}

.page {
  backgroud: var(--primaryColor);
  color: var(--primaryColor);
}
  1. 动态更改主题
// 替换变量值
document.body.style.setProperty("--primaryColor", "blue");

// or

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

小结

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

references

posted @ 2021-11-27 21:23  shanejix  阅读(107)  评论(0)    收藏  举报