less 切换主题

1. 思路

本文实现环境是react+less，但并不限于react；思路主要是在最外层div上添加切换主题的相关样式，如theme-blue，接下来使用less中命名空间的特性和函数来实现不同的主题对应不同的颜色等样式

2.主要代码部分

html代码

<!-- 最外层div -->
<div class="theme-blue">
...
</div>

theme.less文件

/* 公共函数部分 */
.theme(@active-color, @gradient-color-from, @gradient-color-to){
  .header-nav-item: hover,
  .item-active{
    color: @active-color;
    &::after{
      background-image: linear-gradient(to right, @gradient-color-from 78%, @gradient-color-to 100%)
    }
  }
  /*将所有的涉及到切换主题的样式全部放在此处*/
}
/*不同主题传不同的变量*/
.theme-blue{
  @active-color: #1961EB;
  @gradient-color-from: #2166E7;
  @gradient-color-to: #518FFE;
  .theme(@active-color, @gradient-color-from, @gradient-color-to);
}
.theme-red{
  @active-color: red;
  @gradient-color-from: red;
  @gradient-color-to: orange;
  .theme(@active-color, @gradient-color-from, @gradient-color-to);
}