前端react项目主题切换功能实现（含echars）

本文使用的是css var()变量方法。优点是操作简单，无难度易上手，秒速切换不卡顿等等。缺点是工作量较大，每个地方都要使用var()赋值颜色，特别是使用antd组件后，需要手动替换antd组件默认样式等等。

实现方法如下：

js核心代码（非常简单）：

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));
    }
  }

效果图举例：

效果图，秒切不卡顿

希望以上分享可以帮助到各位。