light and dark theme support

html

<select name="theme" id="theme">
<option value="system">System</option>
<option value="brightlight">Light</option>
<option value="darknight">Dark</option>
</select>

css

:root {
--theme: brightlight;
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
--theme: darknight;
color-scheme: dark;
}
:root:has([value="brightlight"]:checked) {
--theme: brightlight;
color-scheme: light;}
:root:has([value="darknight"]:checked) {
--theme: darknight;
color-scheme: dark;
}
body {
background: hsl(0 0% 90%);
color: hsl(0 0% 15%);
h1, h2: hsl(0 0% 25%);
@container style(--theme: darknight) {
background: hsl(209 50% 10%);
color: hsl(209 50% 90%);
h1, h2: hsl(209 50% 80%);
}
}