本文使用的是css var()变量方法。优点是操作简单，无难度易上手，秒速切换不卡顿等等。缺点是工作量较大，每个地方都要使用var()赋值颜色，特别是使用antd组件后，需要手动替换antd组件默认样式等等。
实现方法如下：
js核心代码（非常简单）：
<Switch
checkedChildren="浅"
unCheckedChildren="深"
defaultChecked={this.props.global.theme !== 'dark'}
onClick={this.onChangeTheme}
/>
onChangeTheme = bool => {
this.props.dispatch({ //这里用到了reduce，解决一些css不好控制但js好控制的样式
type: 'global/setTheme',
payload: { theme: bool ? 'light' : 'dark' }
});
// 主要通过切换body的class来切换css变量，可以先默认给一个主题
let body = document.getElementsByTagName('body')[0];
// let themeLink = document.getElementById('theme-link');
if(bool){
body.className = 'light-theme';
// themeLink.href = '/theme/light.css'; // 切换 antd 组件主题(亮色)
} else {
body.className = 'dark-theme';
// themeLink.href = '/theme/dark.css'; // 切换 antd 组件主题(暗色)
}
// 注释部分是切换项目引入的css文件来控制样式
}
css 核心代码：
/*******************配置组件自定义颜色(入口css)******************/
.light-theme {
// 亮色主题颜色全局变量
--primary-color: #1890ff;
--primary-color50: rgba(24,144,255, 0.5);
--primary-color20: rgba(24,144,255, 0.2);
--main-background-color: #ffffff;
--text-color: rgba(0, 0, 0, 0.85);
--text-color65: rgba(0, 0, 0, 0.65);
--text-color45: rgba(0, 0, 0, 0.45);
--text-color25: rgba(0, 0, 0, 0.25);
--text-color10: rgba(0, 0, 0, 0.1);
--title-text-color: #000000;
--title-text-primary-color: #1890ff;
--filter-background-image: url('./static/img/fiter_content_bg.png');
//...
}
.dark-theme {
// 暗色主题颜色全局变量
--primary-color: #67B9B8;
--primary-color50: rgba(103,185,184, 0.5);
--primary-color20: rgba(103,185,184, 0.2);
--main-background-color: #213853;
--text-color:rgba(255, 255, 255, 0.85);
--text-color65:rgba(255, 255, 255, 0.65);
--text-color45:rgba(255, 255, 255, 0.45);
--text-color25:rgba(255, 255, 255, 0.25);
--text-color10:rgba(255, 255, 255, 0.1);
--title-text-color: #ffffff;
--title-text-primary-color: #ffffff;
--filter-background-image: url('./static/img/fiter_content_bg_dark.png');
//...
}
css在项目中应用举例：
//项目中样式：
.topLine span {
display: block;
text-align: center;
//background: var(--main-background-color);
border-radius: 2px;
color: var(--text-color);
width: 60%;
box-shadow: 4px 4px 1px var(--primary-color50);
background-image: var(--filter-background-image);
}
//antd手动替换样式：
:global{
.ant-btn-primary,
.ant-btn-primary:hover, .ant-btn-primary:focus,
.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover,
.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled){
color: #ffffff;
background: var(--primary-color);
border-color: var(--primary-color);
}
.ant-empty-normal, .ant-picker-suffix{
color: var(--empty-text);
}
.ant-picker,.ant-checkbox-inner{
background-color: var(--btn-bg);
border-color: var(--btn-border-color);
}
//...
}
echarts 主题切换举例：
UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
if(nextProps.theme !== this.props.theme){
this.chart.dispose();
this.chart = echarts.init(document.getElementById('lineLowest'),nextProps.theme);// light or dark
this.chart.setOption(this.getLineLowestOption(this.props.home.LastLoad));
}
}
效果图举例：
效果图，秒切不卡顿
希望以上分享可以帮助到各位。
简单使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自适应主题</title>
</head>
<style>
.wx-theme {
--primary-color: #df3031;
--bg-color: #fff;
--text-color: #000;
}
.ali-theme {
--primary-color: #df3031;
--bg-color: #000;
--text-color: #fff;
}
/* 使用 也可以在其他任意页面css、less中使用*/
.title{
color: var(--primary-color)
}
</style>
<body>
<div id="root"></div>
</body>
<script>
let ua = window.navigator.userAgent.toLowerCase();
let body = document.getElementsByTagName('body')[0];
if (ua.indexOf('alipay') > -1) {
body.className = 'ali-theme';
} else {
body.className = 'wx-theme';
}
</script>
</html>
