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);
}
网友评论