• home > webfront > style > darkMode >

    DarkMode(3):sass函数实实现深色模式操作

    Author:zhoulujun Date:

    深色模式实现起来有很多种。但是最简易的还是 :not(img) { filter: invert(100%) hue-rotate(180deg); } 最舒服。对于不是很复杂的页面,足够了

    上文《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