Set our theme in seperate .css
files:
:root {
--background: #18181B;
--foreground: #FFFFFF;
--highlights: #FF0000;
}
Include our stylesheets based on color-scheme:
<link
rel="stylesheet"
href="/static/css/dark.css"
media="(prefers-color-scheme: dark)"
/>
<link
rel="stylesheet"
href="/static/css/light.css"
media="(prefers-color-scheme: light)"
/>
Apply variable as needed:
border: 1px var(--highlights) solid;
You can even update .svg
:
svg:not([fill]) {
fill: var(--foreground);
}
Nice.