乐趣区

Less 函数巧妙解决白天和夜间模式

前言
最近接到一个需求,是做白天和夜间模式的切换,里面涉及到背景色,主要文字色,副标题,备注的相关颜色的切换。
由于是在老代码中进行改造,而且目前 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,表示夜间
}
写在最后
好久没有更新了,谢谢关注的朋友,我胡汉三又回来了。

退出移动版