798cbe968a
* Only show the Replay Onboarding button in file settings Resolves #351. Eventually we will implement more sophisticated logic for which settings should be shown where. Signed-off-by: Frank Noirot <frank@kittycad.io> * Remove unnecessary console.log Signed-off-by: Frank Noirot <frank@kittycad.io> * Respond to system theme changes in real-time If the user has their "theme" setting to "system". I tried to use the [XState invoked callback approach](https://xstate.js.org/docs/guides/communication.html#invoking-callbacks), but I could not find any way to respond to the latest context/state values within the media listener; I kept receiving stale state. Signed-off-by: Frank Noirot <frank@kittycad.io> --------- Signed-off-by: Frank Noirot <frank@kittycad.io>
24 lines
607 B
TypeScript
24 lines
607 B
TypeScript
export enum Themes {
|
|
Light = 'light',
|
|
Dark = 'dark',
|
|
System = 'system',
|
|
}
|
|
|
|
// Get the theme from the system settings manually
|
|
export function getSystemTheme(): Exclude<Themes, 'system'> {
|
|
return typeof window !== 'undefined' && 'matchMedia' in window
|
|
? window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
? Themes.Dark
|
|
: Themes.Light
|
|
: Themes.Light
|
|
}
|
|
|
|
// Set the theme class on the body element
|
|
export function setThemeClass(theme: Themes) {
|
|
if (theme === Themes.Dark) {
|
|
document.body.classList.add('dark')
|
|
} else {
|
|
document.body.classList.remove('dark')
|
|
}
|
|
}
|