लाइट और डार्क एचएसएल स्टार्टर किट

यह पैटर्न बताता है कि सीएसएस कस्टम प्रॉपर्टी की मदद से सही हल्के और गहरे रंग वाली थीम बनाने के लिए, एचएसएल का इस्तेमाल कैसे किया जाए.

एचटीएमएल

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