mirror of
https://github.com/sern-handler/website
synced 2026-06-19 14:22:21 +00:00
40 lines
1.3 KiB
Plaintext
40 lines
1.3 KiB
Plaintext
---
|
|
import type { Props } from '../props';
|
|
import Icon from '../user-components/Icon.astro';
|
|
---
|
|
|
|
{/* This is intentionally inlined to avoid FOUC. */}
|
|
<script is:inline>
|
|
window.StarlightThemeProvider = (() => {
|
|
const storedTheme =
|
|
typeof localStorage !== 'undefined' && localStorage.getItem('starlight-theme');
|
|
const theme =
|
|
storedTheme ||
|
|
(window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
|
|
document.documentElement.dataset.theme = theme === 'light' ? 'light' : 'dark';
|
|
return {
|
|
updatePickers(theme = storedTheme || 'auto') {
|
|
document.querySelectorAll('starlight-theme-select').forEach((picker) => {
|
|
const select = picker.querySelector('select');
|
|
if (select) select.value = theme;
|
|
/** @type {HTMLTemplateElement | null} */
|
|
const tmpl = document.querySelector(`#theme-icons`);
|
|
const newIcon = tmpl && tmpl.content.querySelector('.' + theme);
|
|
if (newIcon) {
|
|
const oldIcon = picker.querySelector('svg.label-icon');
|
|
if (oldIcon) {
|
|
oldIcon.replaceChildren(...newIcon.cloneNode(true).childNodes);
|
|
}
|
|
}
|
|
});
|
|
},
|
|
};
|
|
})();
|
|
</script>
|
|
|
|
<template id="theme-icons">
|
|
<Icon name="sun" class="light" />
|
|
<Icon name="moon" class="dark" />
|
|
<Icon name="laptop" class="auto" />
|
|
</template>
|