ts theme

theme.ts

export enum Theme {
	LIGHT = 'light',
	DARK = 'dark',
}

const colorScheme = window.matchMedia(`(prefers-color-scheme: ${Theme.DARK})`);

export const setTheme = (theme: Theme) => {
	document.documentElement.setAttribute('data-theme', theme);
	localStorage.setItem('theme', theme);
};

export const getTheme = (): Theme => {
	if (localStorage.getItem('theme') === Theme.DARK || colorScheme.matches) {
		return Theme.DARK
	}

	return Theme.LIGHT;
};

export const toggleTheme = () => {
	const theme = getTheme();
	setTheme(theme === Theme.DARK ? Theme.LIGHT : Theme.DARK);
};

colorScheme?.addEventListener('change', event => {
	setTheme(event.matches ? Theme.DARK : Theme.LIGHT);
});

const theme = getTheme();
setTheme(theme);