36 lines
1.2 KiB
Plaintext
36 lines
1.2 KiB
Plaintext
---
|
|
const { class: providedClasses, selectClass, optionClass } = Astro.props;
|
|
---
|
|
|
|
<theme-selector class:list={[providedClasses]}></theme-selector>
|
|
<script is:inline define:vars={{ selectClass, optionClass }}>
|
|
if (!customElements.get("theme-selector")) {
|
|
customElements.define(
|
|
"theme-selector",
|
|
class extends HTMLElement {
|
|
connectedCallback() {
|
|
this.innerHTML = `
|
|
<select name="theme-select" class=${selectClass}>
|
|
<option value="auto" class=${optionClass}>Auto</option>
|
|
<option value="light" class=${optionClass}>Light</option>
|
|
<option value="dark" class=${optionClass}>Dark</option>
|
|
</select>
|
|
`;
|
|
this.querySelector("select").onchange = (event) =>
|
|
theme.setTheme(event.target.value);
|
|
this.setAttribute("aria-label", "Select Theme");
|
|
this.updateSelectedTheme();
|
|
|
|
document.addEventListener("theme-changed", (event) => {
|
|
this.updateSelectedTheme(event.detail.theme);
|
|
});
|
|
}
|
|
|
|
updateSelectedTheme(newTheme = theme.getTheme()) {
|
|
this.querySelector("select").value = newTheme;
|
|
}
|
|
}
|
|
);
|
|
}
|
|
</script>
|