rzerres/element-call
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Theme loading without flickering (#2233)

Browse Source
This commit is contained in:
Timo
2024-03-13 14:58:21 +01:00
committed by GitHub
parent 4a9a58475f
commit c932dd8c9b
8 changed files with 19 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/useTheme.ts
View File

@@ -22,10 +22,9 @@ export const useTheme = (): void => {
const { theme: themeName } = useUrlParams();
const previousTheme = useRef<string | null>(document.body.classList.item(0));
useLayoutEffect(() => {
// Don't update the current theme if the url does not contain a theme prop.
if (!themeName) return;
const theme = themeName.includes("light") ? "light" : "dark";
const themeHighContrast = themeName.includes("high-contrast") ? "-hc" : "";
// If the url does not contain a theme props we default to "dark".
const theme = themeName?.includes("light") ? "light" : "dark";
const themeHighContrast = themeName?.includes("high-contrast") ? "-hc" : "";
const themeString = "cpd-theme-" + theme + themeHighContrast;
if (themeString !== previousTheme.current) {
document.body.classList.remove(
@@ -37,5 +36,6 @@ export const useTheme = (): void => {
document.body.classList.add(themeString);
previousTheme.current = themeString;
}
document.body.classList.remove("no-theme");
}, [previousTheme, themeName]);
};