ライト / ダーク HSL スターター キット

このパターンは、HSL を使用して、CSS カスタム プロパティを使用して調和のとれたライトテーマとダークテーマを作成する方法を示しています。

HTML

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

CSS


        :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%
    );
  }
}