内容简介：最近接到一个需求，是做白天和夜间模式的切换，里面涉及到背景色，主要文字色，副标题，备注的相关颜色的切换。由于是在老代码中进行改造，而且目前正常情况下，做这个实现，基本有以下方法
前言
最近接到一个需求，是做白天和夜间模式的切换，里面涉及到背景色，主要文字色，副标题，备注的相关颜色的切换。
由于是在老代码中进行改造，而且目前 css
是用 less
写的。
思路
正常情况下，做这个实现，基本有以下方法
- 拷贝一份原有样式，把最上层的样式名加个 -dark, 重写内部子层级的样式，然后在按外部模式引用。
- Less 函数，定义一个less函数，传递不同的颜色值进去
-
Less 函数，传递
模式名称进去，在函数内部定义出需要变更的颜色属性，动态加入模式名称
第一种：哈哈，很多人下意识是这种方法。但是，两套模板，你要改下样式的话，两套都要改，不符合我们的易维护的理念，舍弃。
第二张：不错的想法，目前网上搜到过几种这样的方式。但是存在一个问题，要传很多参数，以后变化起来又要加参数，使用起来不是很方便。
第三种：SIX SIX SIX，只传入主题名。调用起来很方便。
核心理念，用函数式想法解决CSS重复问题。
实现
这里的实现，我就只写第三种了。
第一步：定义出不同主题色
第二步：定义模式切换方法，利用 Less
变量插值拼接出主题色变量，然后在样式里 @@
取值
第三步：根据模式字段判断，引用不同的主题了 ，如下 白天引用 .test
夜间用 .test-dark
// 白天色
@bgColor: #F7F8FA;
@textColor: #333333;
@subTextColor: #666666;
@tipsColor: #CCCCCC;
@errorColor: #EE6560;
// 夜间色
@bgColor-dark: #171B30;
@textColor-dark: #FFFFFF;
@subTextColor-dark: rgba(255, 255, 255, 0.6);
@tipsColor-dark: rgba(255, 255, 255, 0.4);
// 模式切换
.styleChange(@theme) {
// 定义页面显示各种颜色，拼接 theme 主题
@bgColor: "bgColor@{theme}";
@textColor: "textColor@{theme}";
@subTextColor: "subTextColor@{theme}";
@tipsColor: "tipsColor@{theme}";
width: 100%;
background: @@bgColor; // 使用 @@style 双@的方法取值
}
// 白天模式
.test {
.styleChange(''); // 执行less 函数
}
// 夜间模式
.test-dark {
.styleChange(-dark); // 执行less函数，传入 -dark ，表示夜间
}
写在最后
好久没有更新了，谢谢关注的朋友，我胡汉三又回来了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
