内容简介:最近接到一个需求,是做白天和夜间模式的切换,里面涉及到背景色,主要文字色,副标题,备注的相关颜色的切换。由于是在老代码中进行改造,而且目前正常情况下,做这个实现,基本有以下方法
前言
最近接到一个需求,是做白天和夜间模式的切换,里面涉及到背景色,主要文字色,副标题,备注的相关颜色的切换。
由于是在老代码中进行改造,而且目前 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 ,表示夜间 }
写在最后
好久没有更新了,谢谢关注的朋友,我胡汉三又回来了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。