diff --git a/public/index.html b/public/index.html
index 93dd8973..02b587f8 100644
--- a/public/index.html
+++ b/public/index.html
@@ -13,7 +13,7 @@
-
+
diff --git a/src/index.css b/src/index.css
index 90794ddc..cbf64a6d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -157,6 +157,10 @@ body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
+/* We use this to not render the page at all until we know the theme.*/
+.nodisplay {
+ opacity: 0;
+}
html,
body,
diff --git a/src/useTheme.ts b/src/useTheme.ts
index 99a7e9cd..5cc9021d 100644
--- a/src/useTheme.ts
+++ b/src/useTheme.ts
@@ -17,15 +17,15 @@ limitations under the License.
import { useLayoutEffect, useRef } from "react";
import { useUrlParams } from "./UrlParams";
+import { widget } from "./widget";
export const useTheme = (): void => {
const { theme: themeName } = useUrlParams();
const previousTheme = useRef(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 +37,6 @@ export const useTheme = (): void => {
document.body.classList.add(themeString);
previousTheme.current = themeString;
}
+ document.body.classList.remove("nodisplay");
}, [previousTheme, themeName]);
};