2023-08-28 20:31:49 -04:00
|
|
|
export enum Themes {
|
|
|
|
Light = 'light',
|
|
|
|
Dark = 'dark',
|
|
|
|
System = 'system',
|
|
|
|
}
|
|
|
|
|
2023-08-31 09:34:13 -04:00
|
|
|
// Get the theme from the system settings manually
|
2023-08-28 20:31:49 -04:00
|
|
|
export function getSystemTheme(): Exclude<Themes, 'system'> {
|
2023-08-31 09:34:13 -04:00
|
|
|
return typeof window !== 'undefined' && 'matchMedia' in window
|
|
|
|
? window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
|
|
? Themes.Dark
|
|
|
|
: Themes.Light
|
2023-08-28 20:31:49 -04:00
|
|
|
: Themes.Light
|
|
|
|
}
|
|
|
|
|
2023-08-31 09:34:13 -04:00
|
|
|
// Set the theme class on the body element
|
2023-08-28 20:31:49 -04:00
|
|
|
export function setThemeClass(theme: Themes) {
|
2023-08-31 09:34:13 -04:00
|
|
|
if (theme === Themes.Dark) {
|
2023-08-28 20:31:49 -04:00
|
|
|
document.body.classList.add('dark')
|
|
|
|
} else {
|
|
|
|
document.body.classList.remove('dark')
|
|
|
|
}
|
|
|
|
}
|