Enable resetting the colour scheme to the system appearance
This commit is contained in:
parent
694faa0517
commit
051b32a983
@ -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 => {
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user