LaconicNetwork/vega-frontend-monorepo
4
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

fix: dark class being removed on token due to theme switcher changes (#2484)

Browse Source 
* fix: dark class being removed on token due to theme switcher changes

* chore: check for window before reading from document classlist
This commit is contained in:
Matthew Russell 2022-12-29 23:01:37 -06:00 committed by GitHub
parent 0bafa4c7d5
commit 955e233c46
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
libs/react-helpers/src/hooks/use-theme-switcher.ts
View File

@ -9,6 +9,8 @@ const Themes = {
type Theme = typeof Themes[keyof typeof Themes]; type Theme = typeof Themes[keyof typeof Themes];
const isBrowser = typeof window !== 'undefined';
const validateTheme = (theme: string): theme is Theme => { const validateTheme = (theme: string): theme is Theme => {
if (Object.values(Themes).includes(theme as Theme)) return true; if (Object.values(Themes).includes(theme as Theme)) return true;
LocalStorage.removeItem(THEME_STORAGE_KEY); LocalStorage.removeItem(THEME_STORAGE_KEY);
@ -16,7 +18,7 @@ const validateTheme = (theme: string): theme is Theme => {
}; };
const setThemeClassName = (theme: Theme) => { const setThemeClassName = (theme: Theme) => {
if (typeof window !== 'undefined') { if (isBrowser) {
if (theme === Themes.DARK) { if (theme === Themes.DARK) {
document.documentElement.classList.add(Themes.DARK); document.documentElement.classList.add(Themes.DARK);
} else { } else {
@ -26,6 +28,13 @@ const setThemeClassName = (theme: Theme) => {
}; };
const getCurrentTheme = () => { const getCurrentTheme = () => {
// If an app is only dark theme then the page will be rendered with
// the dark class already applied. In this case return early with state
// set to dark
if (isBrowser && document.documentElement.classList.contains(Themes.DARK)) {
return Themes.DARK;
}
const storedTheme = LocalStorage.getItem(THEME_STORAGE_KEY); const storedTheme = LocalStorage.getItem(THEME_STORAGE_KEY);
if (storedTheme && validateTheme(storedTheme)) { if (storedTheme && validateTheme(storedTheme)) {
@ -34,7 +43,7 @@ const getCurrentTheme = () => {
} }
const theme = const theme =
typeof window !== 'undefined' && isBrowser &&
typeof window.matchMedia === 'function' && // jest test environment matchMedia is undefined typeof window.matchMedia === 'function' && // jest test environment matchMedia is undefined
window.matchMedia('(prefers-color-scheme: dark)').matches window.matchMedia('(prefers-color-scheme: dark)').matches
? Themes.DARK ? Themes.DARK