Kit inicial de HSL claro e escuro

Esse padrão mostra como usar HSL para criar temas claros e escuros harmoniosos com propriedades personalizadas de CSS.

<h1><b>HSL</b> is <u>awesome.</u></h1>

       
:root {
 
color-scheme: dark light;

 
/* destructure brand channels */
 
--hue: 200; /* change me!! */
 
--saturation: 100%;
 
--lightness: 50%;

 
/* build colors with props */
 
--brand: hsl(
    var
(--hue)
    var
(--saturation)
    var
(--lightness)
 
);

 
/* very dark brand blue */
 
--text: hsl(
    var
(--hue)
    var
(--saturation)
   
10% /* lower is darker */
 
);

 
/* very bright brand white */
 
--surface: hsl(
    var
(--hue)
    calc
(var(--saturation) / 2)
   
95% /* higher is lighter */
 
);
}

h1
{
 
font-size: 10vmin;
 
font-weight: 300;
}

b
{
 
color: hsl(
    var
(--hue)
    var
(--saturation)
   
30%
 
);
}

u
{
 
text-decoration-color: var(--brand);
}

html
{
 
block-size: 100%;
 
inline-size: 100%;
}

body
{
 
color: var(--text);
 
background: var(--surface);
 
min-block-size: 100%;
 
min-inline-size: 100%;
 
margin: 0;
 
box-sizing: border-box;
 
display: grid;
 
place-content: center;
 
font-family: system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
 
/* just tweak the lightness */
 
/* maybe desaturate too */

 
:root {
   
--text: hsl(
      var
(--hue)
      calc
(var(--saturation) / 2)
     
85%
   
);

   
--surface: hsl(
      var
(--hue)
      var
(--saturation)
     
5%
   
);
 
}

  b
{
   
color: hsl(
      var
(--hue)
      var
(--saturation)
     
75%
   
);
 
}
}