generated from autonomic-cooperative/astro-payload-template
Add vanilla theme switcher
This commit is contained in:
21
astro/src/utils/theme.ts
Normal file
21
astro/src/utils/theme.ts
Normal file
@ -0,0 +1,21 @@
|
||||
export function switchTheme(themeClass: string): void {
|
||||
const bodyElement = document.body;
|
||||
const classesToRemove = ['light', 'dark', 'autonomic'];
|
||||
|
||||
bodyElement.classList.remove(...classesToRemove);
|
||||
bodyElement.classList.add(themeClass);
|
||||
}
|
||||
|
||||
export function handleThemeChange(event: Event): void {
|
||||
const selectElement = event.target as HTMLSelectElement;
|
||||
const selectedTheme = selectElement.value;
|
||||
|
||||
switchTheme(selectedTheme);
|
||||
}
|
||||
|
||||
export function initializeThemeSelector(): void {
|
||||
const themeSelector = document.getElementById('theme-selector');
|
||||
if (themeSelector) {
|
||||
themeSelector.addEventListener('change', handleThemeChange);
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user