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

前言

最近接到一个需求，是做白天和夜间模式的切换，里面涉及到背景色，主要文字色，副标题，备注的相关颜色的切换。

由于是在老代码中进行改造，而且目前css是用less写的。

思路

正常情况下，做这个实现，基本有以下方法

• 拷贝一份原有样式，把最上层的样式名加个 -dark, 重写内部子层级的样式，然后在按外部模式引用。
• Less 函数，定义一个less函数，传递不同的颜色值进去
• Less 函数，传递模式名称进去，在函数内部定义出需要变更的颜色属性，动态加入模式名称

实现

这里的实现，我就只写第三种了。

// 白天色
@bgColor-daily: #F7F8FA;
@textColor-daily: #333333;
@subTextColor-daily: #666666;
@tipsColor-daily: #CCCCCC;
@errorColor-daily: #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(daily); // 执行less 函数
}

// 夜间模式
.test-dark {
  .styleChange(dark); // 执行less函数，传入 dark ，表示夜间
}

写在最后

好久没有更新了，谢谢关注的朋友，我胡汉三又回来了。