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%…
Category: CSS