美文网首页
less 切换主题

less 切换主题

作者: 静简明 | 来源:发表于2018-06-14 11:34 被阅读0次

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

    相关文章

      网友评论

          本文标题:less 切换主题

          本文链接:https://www.haomeiwen.com/subject/swneeftx.html