The previous DarkMode(2) : DarkMode Solution — CSS Color Variables to implement DarkMode was completely based on sample color extraction variables, and then using preprocessing them to generate two sets of styles. Toggle style files.

Sass custom functions and mixin instructions to achieve dark mode

In fact, it’s still variable extraction, but instead of two variable files, it’s a map file.

First declare the function

@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); }Copy the code

Style code

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

Js switch style

document.body.dataset.theme = newValue;
Copy the code

Of course, it is also possible to add a style class to the body. In this scenario, CSS selectors are used to isolate the main modules

Introducing Themify: CSS Themes Made Easy, How to Create a Dark Mode in Sass

The sASS color function implements dark mode

When defining the sASS variable, we will have the base size, such as:

$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;Copy the code

Colors, we can also define base colors, theme colors, and generate the entire theme through the SASS color function.

And then you do that with the base color, and you get another set of themes

Sass provides quite a number of color functions:

Sass-lang.com/documentati…

On the large scale, it is mainly divided into RGB, HSL and Opacity functions. Of course, it also includes some other color functions, such as adjust-color and change-color.

Here’s an overview

HSL color function

“HSL” stands for “H: hue”, “S: saturation”, “L: brightness”. Hue is the color on the color palette (see below), and the color selection is using saturation: “0 degrees is red,” “120 degrees is green,” and “240 degrees is blue.”

HSL gives us more intuitive color control, and we often need to make one color darker or brighter than another. For example, in the “A: Hover” state we need to darken a color, so using “HSL” is very convenient.

Under the theoretical knowledge in this field, amway, the RGB color space/CMYK/an HSL/HSB/HSV/Lab/YUV basic theory and transform method: RGB and YUV”

We most commonly use to lighten lighten, darken, saturation, lightness and adjust-hue

  • Lighten (color,color,color,amount) : Lighten the color by changing the brightness value of the color to create a new color;

  • Darken (color,color,color,amount) : Darken the color by changing the brightness value of the color to create a new color;

  • Invert ($color) : Invert the red, green and blue values with the same opacity.

  • Saturate (color,color,color,amount) : Creates a new color by changing the saturation value of the color to make it more saturated

  • Desaturate (color,color,color,amount) : Creates a new color by changing the saturation value of the color so that the color is less saturated;

  • Saturation ($color) : the saturation value is obtained from a color.

  • Lightness ($color) : Gets the lightness value from a color;

  • [grayscale (color)] (http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#grayscale-instance_method) : Turn a color gray, equivalent to desaturate(color,100%);

  • [complement (color)] (http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#complement-instance_method) : Returns a supplementary color, equivalent to adjust-hue(color,180deg);

  • HSL (Hue,hue,saturation,$lightness) : creates a color based on the values of hue,saturation, and lightness;

  • Hsla (hue, hue, hue, saturation, lightness, lightness, lightness, alpha) : A color is created by using the values of hue, saturation, lightness and alpha.

  • Hue ($color) : Gets the hue value from a color.

  • Adjust – hue (color, color, color, degrees) : by changing a color hue value, create a new color;

Invert, lighten, darken are related to generate our dark mode.

RGB color function

RGB colors are just an expression of colors, where R is “red” for red, G is” green “for green, and B is” blue “for blue. There are six functions for RGB colors in Sass:

  • RGB (red,red,red,green,$blue) : create a color based on the red,green, and blue values;

  • Rgba (red,red,red,green, blue,blue,blue,alpha) : Creates a color based on red,green, blue, and transparency values;

  • Red ($color) : Retrieves the red value from a color;

  • Green ($color) : Retrieves the green value from a color;

  • Blue ($color) : Retrieves the blue value of a color;

  • Mix (color−1,color-1,color−1,color-2,[$weight]) : Mix two colors together.

RGBA () function

The rGBA () function is used to convert a color to an RGBA color based on transparency. The syntax has two formats:

  • Rgba (red,red,red,green, blue,blue,blue,alpha) : Translates an RGBA color to the same value as the untranslated color

  • Rgba (color,color,color,alpha) : Converts a Hex color to an RGBA color

Mix () function

The Mix function mixes two colors together in a certain proportion to produce another color. To be specific, the selection weight is measured by the percentage of each RGB, and of course transparency will also have a certain weight. The specified ratio is included in the returned color. The default ratio is 50%, which means the two colors are split 50/50. If the specified ratio is 25%, this means the first color is 25% and the second color is 75%. The syntax is as follows:

  • [mix (color, color – 1-1, color – 1, color – 2, weight) :] (https://sass-lang.com/documentation/modules/color#mix) and color – 1 Color −2 refers to the colors you need to combine, which can be any expression or color variable. Color-2 refers to the color you need to merge, and the color can be any expression or color variable. Color −2 refers to the colors you need to combine, which can be any expression or color variable. The default value is 50%. The value ranges from 0 to 1.

This part of the implementation, need to work closely with the designer. So, for the current front-end environment, there is nothing really good to say

Go back to sleep. We’ll talk tomorrow

Reprint the home station article “DarkMode (3) : sass function real realize the dark mode operation”, please indicate the source: www.zhoulujun.cn/html/webfro…