Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix flashing white when dark theme is enabled (#1176)
Load the theme code as fast as possible to prevent flashing the light theme before fetching and applying the dark theme from the URL or localstorage.
- Loading branch information
Showing
4 changed files
with
33 additions
and
20 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
/** | ||
* demo-theme is specifically loaded right after the body and not deferred | ||
* to ensure we switch to the chosen dark/light theme as fast as possible. | ||
* This will prevent any flashes of the light theme (default) before switching. | ||
*/ | ||
|
||
const themeStorageKey = 'tablerTheme' | ||
const defaultTheme = 'light' | ||
let selectedTheme | ||
|
||
// https://stackoverflow.com/a/901144 | ||
const params = new Proxy(new URLSearchParams(window.location.search), { | ||
get: (searchParams, prop) => searchParams.get(prop), | ||
}); | ||
|
||
if (!!params.theme) { | ||
localStorage.setItem(themeStorageKey, params.theme) | ||
selectedTheme = params.theme | ||
} else { | ||
const storedTheme = localStorage.getItem(themeStorageKey) | ||
selectedTheme = storedTheme ? storedTheme : defaultTheme | ||
} | ||
|
||
document.body.classList.remove('theme-dark', 'theme-light'); | ||
document.body.classList.add(`theme-${selectedTheme}`); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
c4a6a86
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
tabler – ./
tabler-git-main-tabler-ui.vercel.app
tabler-tabler-ui.vercel.app
preview.tabler.io
demo.tabler.io