mirror of
https://github.com/kittywitch/dork.dev.git
synced 2026-02-09 23:29:17 -08:00
54 lines
1.9 KiB
HTML
54 lines
1.9 KiB
HTML
<!-- Component for persistent user color scheme selection -->
|
|
|
|
<!--
|
|
Motivation:
|
|
* Allow for auto-detection via prefers-color-scheme
|
|
* Allow for providing a color scheme by user preference anyway
|
|
* Fail (relatively) quietly without Javascript
|
|
|
|
Other parts of the implementation:
|
|
```scss
|
|
/* Ideally, you use CSS/SCSS variables for colouring here */
|
|
html {
|
|
/* Choose one to default to; light or dark and implement it here */
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
html {
|
|
/* Implement dark with color, background, maybe a separate thing for headings if you feel spicy */
|
|
}
|
|
}
|
|
@media (prefers-color-scheme: light) {
|
|
html {
|
|
/* Implement light with color, background, maybe a separate thing for headings if you feel spicy */
|
|
}
|
|
}
|
|
html:has(#color-scheme-dark:checked) {
|
|
/* Implement dark with color, background, maybe a separate thing for headings if you feel spicy */
|
|
}
|
|
html:has(#color-scheme-light:checked) {
|
|
/* Implement light with color, background, maybe a separate thing for headings if you feel spicy */
|
|
}
|
|
```
|
|
-->
|
|
|
|
<fieldset class="nonoscript">
|
|
<legend>Site color scheme</legend>
|
|
|
|
<input name="color-scheme" type="radio" id="color-scheme-dark" value="dark">
|
|
<label for="color-scheme-dark">Dark</label>
|
|
<input name="color-scheme" type="radio" id="color-scheme-light" value="light">
|
|
<label for="color-scheme-light">Light</label>
|
|
<button
|
|
id="clear-color-scheme"
|
|
type="button"
|
|
title="Will also revert the page back to the color scheme preference as provided by the system and browser."
|
|
>
|
|
Clear preference
|
|
</button>
|
|
</fieldset>
|
|
|
|
<noscript>Persistence of user-selected color scheme is not possible without Javascript, however automatic detection from CSS will still work.</noscript>
|
|
|
|
<script src="/colorscheme.js">
|
|
</script>
|
|
<!-- End of component for color scheme selection -->
|