यह पैटर्न बताता है कि सीएसएस कस्टम प्रॉपर्टी की मदद से सही हल्के और गहरे रंग वाली थीम बनाने के लिए, एचएसएल का इस्तेमाल कैसे किया जाए.
एचटीएमएल
<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%
);
}
}