Fix dark theme on initial page load

astral-sh · Aug 23, 2024 · 4c82489 · 4c82489
1 parent 1f2cb09
commit 4c82489
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 10 deletions.
diff --git a/playground/src/Editor/Chrome.tsx b/playground/src/Editor/Chrome.tsx
@@ -105,8 +105,6 @@ async function startPlayground(): Promise<{
   await initRuff();
   const monaco = await loader.init();
 
-  console.log(monaco);
-
   setupMonaco(monaco);
 
   const response = await restore();

diff --git a/playground/src/Editor/theme.ts b/playground/src/Editor/theme.ts
@@ -6,16 +6,14 @@ import { useState } from "react";
 export type Theme = "dark" | "light";
 
 export function useTheme(): [Theme, (theme: Theme) => void] {
-  const [localTheme, setLocalTheme] = useState<Theme>(() =>
-    detectInitialTheme(),
-  );
+  const [localTheme, setLocalTheme] = useState<Theme>(() => {
+    const theme = detectInitialTheme();
+    toggleTheme(theme);
+    return theme;
+  });
 
   const setTheme = (mode: Theme) => {
-    if (mode === "dark") {
-      document.body.classList.add("dark");
-    } else {
-      document.body.classList.remove("dark");
-    }
+    toggleTheme(mode);
     localStorage.setItem("theme", mode);
     setLocalTheme(mode);
   };
@@ -35,3 +33,11 @@ function detectInitialTheme(): Theme {
     return "light";
   }
 }
+
+function toggleTheme(theme: Theme) {
+  if (theme === "dark") {
+    document.body.classList.add("dark");
+  } else {
+    document.body.classList.remove("dark");
+  }
+}