内容简介:最近接到一个需求,是做白天和夜间模式的切换,里面涉及到背景色,主要文字色,副标题,备注的相关颜色的切换。由于是在老代码中进行改造,而且目前正常情况下,做这个实现,基本有以下方法
前言
最近接到一个需求,是做白天和夜间模式的切换,里面涉及到背景色,主要文字色,副标题,备注的相关颜色的切换。
由于是在老代码中进行改造,而且目前 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 ,表示夜间 }
写在最后
好久没有更新了,谢谢关注的朋友,我胡汉三又回来了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
写给大家看的设计书(第3版)
[美] Robin Williams / 苏金国、刘亮 / 人民邮电出版社 / 2009-1 / 49.00元
这本书出自一位世界级设计师之手。复杂的设计原理在书中凝炼为亲密性、对齐、重复和对比4 个基本原则。作者以其简洁明快的风格,将优秀设计所必须遵循的这4 个基本原则及其背后的原理通俗易懂地展现在读者面前。本书包含大量的示例,让你了解怎样才能按照自己的方式设计出美观且内容丰富的产品。 此书适用于各行各业需要从事设计工作的读者,也适用于有经验的设计人员。一起来看看 《写给大家看的设计书(第3版)》 这本书的介绍吧!
图片转BASE64编码
在线图片转Base64编码工具
UNIX 时间戳转换
UNIX 时间戳转换