Enable resetting the colour scheme to the system appearance

This commit is contained in:
Lewis Dale 2024-03-01 08:16:23 +00:00
parent 694faa0517
commit 051b32a983
2 changed files with 12 additions and 6 deletions

View File

@ -67,6 +67,10 @@
<input type="radio" name="color-scheme" value="light"> <input type="radio" name="color-scheme" value="light">
Light Light
</label> </label>
<label>
<input type="radio" name="color-scheme" value="system">
System
</label>
</fieldset> </fieldset>
</header> </header>
{{ content | safe }} {{ content | safe }}
@ -90,11 +94,7 @@
return localStorage.getItem('color-scheme'); return localStorage.getItem('color-scheme');
} }
if (window.matchMedia('(prefers-color-scheme: dark)')?.matches) { return "system";
return "dark";
}
return "light";
}; };
const data = new Proxy({ const data = new Proxy({
@ -110,7 +110,7 @@
}); });
const onRadioChange = e => { const onRadioChange = e => {
data[e.target.name] = e.target.value; data[e.target.name] = e.target.value;
} }
document.querySelectorAll('[name="color-scheme"]').forEach(radio => { document.querySelectorAll('[name="color-scheme"]').forEach(radio => {

View File

@ -59,6 +59,12 @@ header > * {
} }
} }
&:has([value="system"]) {
&::before {
content: "\f390";
}
}
&:has(:checked)::before { &:has(:checked)::before {
text-shadow: var(--color-decoration) 1px 0 10px; text-shadow: var(--color-decoration) 1px 0 10px;
} }