Minor refactor

jupyter-book · Aug 23, 2024 · 8dadde7 · 8dadde7
1 parent ea207f8
commit 8dadde7
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 18 deletions.
diff --git a/packages/providers/src/theme.tsx b/packages/providers/src/theme.tsx
@@ -69,11 +69,7 @@ const CLIENT_THEME_SOURCE = `
   const theme = window.matchMedia(${JSON.stringify(PREFERS_LIGHT_MQ)}).matches ? 'light' : 'dark';
   const classes = document.documentElement.classList;
   const hasAnyTheme = classes.contains('light') || classes.contains('dark');
-  if (hasAnyTheme) {
-    console.warn("Document already has theme at load. Set by cookie perhaps?");
-  } else {
-    classes.add(theme);
-  }
+  if (!hasAnyTheme) classes.add(theme);
 `;
 
 /**
@@ -92,15 +88,15 @@ export function ThemeProvider({
   Link,
   top,
   NavLink,
-  staticBuild,
+  useLocalStorageForDarkMode,
 }: {
   children: React.ReactNode;
   theme?: Theme;
   renderers?: Record<string, NodeRenderer>;
   Link?: Link;
   top?: number;
   NavLink?: NavLink;
-  staticBuild?: boolean;
+  useLocalStorageForDarkMode?: boolean;
 }) {
   const [theme, setTheme] = React.useState<Theme | null>(() => {
     // Allow hard-coded theme ignoring system preferences (not recommended)
@@ -112,14 +108,14 @@ export function ThemeProvider({
     }
 
     // Prefer local storage if set
-    if (staticBuild) {
-      const savedTheme = localStorage.get(THEME_KEY);
-      if (savedTheme) {
+    if (useLocalStorageForDarkMode) {
+      const savedTheme = localStorage.getItem(THEME_KEY);
+      if (savedTheme && isTheme(savedTheme)) {
         return savedTheme;
       }
     }
 
-    // Interrogate the sytstem for a preferred theme
+    // Interrogate the system for a preferred theme
     return getPreferredTheme();
   });
 
@@ -145,8 +141,8 @@ export function ThemeProvider({
     if (!isTheme(theme)) {
       return;
     }
-    if (staticBuild) {
-      localStorage.setItem(THEME_KEY, JSON.stringify(theme));
+    if (useLocalStorageForDarkMode) {
+      localStorage.setItem(THEME_KEY, theme);
     } else {
       const xmlhttp = new XMLHttpRequest();
       xmlhttp.open('POST', '/api/theme');

diff --git a/packages/site/src/pages/Root.tsx b/packages/site/src/pages/Root.tsx
@@ -59,7 +59,7 @@ export function Document({
     <ThemeProvider
       theme={theme}
       renderers={renderers}
-      staticBuild={staticBuild}
+      useLocalStorageForDarkMode={true}
       {...links}
       top={top}
     >
@@ -68,7 +68,7 @@ export function Document({
         scripts={scripts}
         config={config}
         title={title}
-        staticBuild={staticBuild}
+        liveReloadListener={!staticBuild}
         baseurl={baseurl}
         top={top}
       />
@@ -81,18 +81,18 @@ export function DocumentWithoutProviders({
   scripts,
   config,
   title,
-  staticBuild,
   baseurl,
   top = DEFAULT_NAV_HEIGHT,
+  liveReloadListener,
 }: {
   children: React.ReactNode;
   scripts?: React.ReactNode;
   config?: SiteManifest;
   title?: string;
-  staticBuild?: boolean;
   baseurl?: string;
   top?: number;
   renderers?: Record<string, NodeRenderer>;
+  liveReloadListener?: boolean;
 }) {
   const { theme } = useTheme();
   return (
@@ -115,7 +115,7 @@ export function DocumentWithoutProviders({
         </BaseUrlProvider>
         <ScrollRestoration />
         <Scripts />
-        {!staticBuild && <LiveReload />}
+        {liveReloadListener && <LiveReload />}
         {scripts}
       </body>
     </html>