上文《DarkMode(2):深色模式解决方案——css颜色变量实现Dark Mode》,完全基于样色抽离变量,然后使用预处理其,生成两套样式。切换样式文件。

sass自定义函数与mixin指令实现暗黑模式

其实还是变量抽离,只是不是两个variable 变量文件,而是一个map文件。

首先声明函数

@mixin themeify {
  @each $theme-name, $theme-map in $themes {
    $theme-map: $theme-map !global;
    body[data-theme=#{$theme-name}] & {
      @content;
    }
  }
} @function themed($key) {
  @return map-get($theme-map, $key);
}

样式代码

button {
 @mixin background($color) {
  @include themeify {
    background: themed($color)
  }
 }
  color: themify(accent-200);
  &:hover {
    background-color: themify(primary-100, 0.5);
  }
}

js切换样式

document.body.dataset.theme = newValue;

当然,给body添加样式类也是可以的。其实这种方案,还是 css 选择器去 隔离各个主体模块

更新详细,推荐阅读:《Introducing Themify: CSS Themes Made Easy 》、《How to Create a Dark Mode in Sass

sass颜色函数实现深色模式

在定义sass变量时,我们会有基准尺寸,如:

$h1-font-size:                $font-size-base * 2.5 !default;
$h2-font-size:                $font-size-base * 2 !default;
$h3-font-size:                $font-size-base * 1.75 !default;
$h4-font-size:                $font-size-base * 1.5 !default;
$h5-font-size:                $font-size-base * 1.25 !default;
$h6-font-size:                $font-size-base !default;

颜色,我们也可以定义基准颜色,主题色系,通过sass颜色函数,生成整个主题。

然后对基准颜色,进行处理,就生成另外一套主题

sass提供蛮多的颜色函数:

https://sass-lang.com/documentation/modules/color

从大的方面主要分为RGB、HSL和Opacity三大类函数,当然其还包括一些其他颜色函数,比如说adjust-color、change-color等等。

这里大致地介绍一下

HSL颜色函数

“HSL”所表示的是“H:色相”,“S:饱和度”,“L:亮度”。色相是在色盘上的颜色(见下图),颜色的选择是使用饱和度:“0度是红色”,“120度为绿色”和“240度为蓝色”。

HSL给我们带来了一个更直观的颜色控制,我们时常需要让一个颜色比另一个颜色更暗一点或者说更亮一点。比如说“a:hover”状态下我们需要把一个颜色变暗一点,那么使用“HSL”是非常方便的。

这方面的理论知识,安利下:《色彩空间RGB/CMYK/HSL/HSB/HSV/Lab/YUV基础理论及转换方法:RGB与YUV

其中我们最常用的有:lighten、darken、saturation、lightness、adjust-hue

其中,我们通过 invert、lighten、darken 相关,就可以生成我们暗黑模式。

RGB颜色函数

rgb颜色只是颜色中的一种表达方式,其中R是“red"表示红色,而G是“green”绿色,B是“blue”蓝色。在Sass中为RGB颜色提供六种函数:

RGBA()函数

rgba()函数主要用来将一个颜色根据透明度转换成rgba颜色。其语法有两种格式:

  • rgba($red,$green,$blue,$alpha):将一个rgba颜色转译出来,和未转译的值一样

  • rgba($color,$alpha) :将一个Hex颜色转换成rgba颜色

Mix()函数

Mix函数是将两种颜色根据一定的比例混合在一起,生成另一种颜色。具体地说,选择权重是每个RGB的百分比来衡量,当然透明度也会有一定的权重。其中指定的比例会包括在返回的颜色中。默认的的比例是50%,这意味着两个颜色各占一半,如果指定的比例是25%,这意味着第一个颜色所占比例为25%,第二个颜色所占比例为75%。其使用语法如下:

  • mix($color-1,$color-2,$weight):$color-1和$color-2指的是你需要合并的颜色,颜色可以是任何表达式,也可以是颜色变量。$weight合并的比例,默认值为50%,其取值范围是0~1之间。

这一部分的实现,需要和设计师紧密地配合。所以,对于目前前端所处的环境,其实也没有啥好讲的

先回去睡觉,明天再讲

转载本站文章《DarkMode(3):sass函数实实现深色模式操作》,
请注明出处:https://www.zhoulujun.cn/html/webfront/style/darkMode/8584.html

DarkMode(3):sass函数实实现深色模式操作的更多相关文章

  1. iOS 深色模式适配

    要求:iOS13.0以上 重点:需要所有界面进行适配,工作量巨大,需要从项目开始就进行适配:H5界面无法进行适配 实现方式:System Colors(常用).Semantic Colors(常用). ...

  2. JavaScript函数的各种调用模式

    函数是JavaScript世界里的第一公民,换句话来说,就是我们如果可以精通JavaScript函数的使用,那么对JavaScript的运用可以更游刃有余了.熟悉JavaScript的人应该都知道,同 ...

  3. 「技巧」如何将Sketch改为深色模式

    之前Sketch只能根据mac系统的外观设置变更皮肤.在更新了版本54之后,可以脱离操作系统,在自己的偏好设置中更改外观了. 准备 Sketch 54 更多工具:whose.design 第一步:打开 ...

  4. 【深色模式】macOS Mojave+Visual Studio for Mac+FineUICore多图赏析!

    全面开启深色模式,今早成功升级到 macOS Mojave,下面就来欣赏一下吧. 点击图片,查看大图 1. 下载 macOS Mojave 2. 安装成功,开启深色模式 3. 来一张桌面截图 4. 开 ...

  5. Mac上深色模式下的精美炫酷软件

    针对发布的 macOS Mojave 10.14 系统中,最大的改变就是引入了深色模式,尤其对技术开发人员来说非常实用,非常的酷! 深色模式使用一种较深的配色方案,这种配色作用于整个系统,包括 Mac ...

  6. h5移动端flexible源码适配终端解读以及常用sass函数

    ;(function(win, lib) { var doc = win.document;// win = window,lib = window.lib; var docEl = doc.docu ...

  7. sass函数:@function

    sass定义了很多函数可供使用,当然你也可以自己定义函数,以@fuction开始. sass的官方函数链接为:sass fuction,实际项目中我们使用最多的应该是颜色函数,而颜色函数中又以ligh ...

  8. macOS Mojave 深色模式

    macOS Mojave 深色模式 mac 关闭 深色模式 https://support.apple.com/zh-cn/HT208976 https://www.apple.com/cn/maco ...

  9. iOS13禁用深色模式

    全局禁用深色模式(暗黑模式)在Info.plist中增加UIUserInterfaceStyle,值为Light,如下 <key>UIUserInterfaceStyle</key& ...

  10. SASS - 函数

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – 语法 SASS – 变量 SASS- 局部文件(Partial) SASS – 混合(Mixin) SASS ...

随机推荐

  1. HarmonyOS UI 开发

    引言 HarmonyOS 提供了强大的 UI 开发工具和组件,使开发者能够创建吸引人的用户界面.本章将详细介绍在 HarmonyOS 中应用 JS.CSS.HTML,HarmonyOS 的 UI 组件 ...

  2. [C++]STL - 队列(Queue) 栈(Stack) 链表(list)

    STL - 队列(Queue) 栈(Stack) 链表(list) Queue 队列 结构特征 这是一种线性储存结构 其数据有先进先出的特点 这种特点被称为FIFO(First In First Ou ...

  3. PCA主成分分析的理解

    u     |_matrix1x2_{{-0.70710678118654757};{-0.70710678118654735}} x^(1)    |_matrix1x2_{{-0.51805350 ...

  4. Windows下SVN服务端(Subversion)及客户端(TortoiseSVN)详细安装教程

    1. Subversion和TortoiseSVN 是什么? http://www.uml.org.cn/pzgl/200811146.asp Subversion 是什么,我想如果不知道的话就没有必 ...

  5. 标子查询优化和改写SQL案例

    京华开发一哥们找我优化条报表SQL,反馈执行时间很慢需要 18s 才能出结果,安排. -- 原SQL SELECT 2 AS TYPE, to_char(a."create_time&quo ...

  6. 圆方树 useful things

    圆方树,是解决仙人掌问题的实用方法,假设最初图都是圆点,对于每个环新建一个方点并连接这个环上所有圆点,能很好规避同一个点可能属于很多个环的情况,并且发现build完之后是一棵树 广义圆方树,能够不局限 ...

  7. 实现MyBatisPlus自定义sql注入器

    目标:新增mysql下的 插入更新的语法 INSERT INTO %s %s VALUES %s ON DUPLICATE KEY UPDATE %s 新增方法类,新增的方法名称为insertOrUp ...

  8. 计算机网络之防火墙和Wlan配置

    一.防火墙 防火墙(firewall)是一种安全设备,它的位置一般处于企业网络边界与外网交界的地方,用于隔离不信任的数据包 准确点讲,它就是隔离外网和内网的一道屏障,用于保护内部资源信息安全的一种策略 ...

  9. Docker安装与教程-Centos7(一)

    复现漏洞时,经常要复现环境,VMware还原太过麻烦,所以学习docker的基本操作也是必要的 Docker三要素-镜像.容器.仓库 操作系统:Centos7 官方教程文档 1.Docker的安装与卸 ...

  10. MySQL-管理员root@'locahost' 丢失,怎么处理?

    版权声明:原创作品,谢绝转载!否则将追究法律责任. ----- 作者:kirin 跳过授权表 ----> 不开启验证功能(无密码登录) --skip-grant-tables 阻止所有tcp/i ...