Merge pull request #387 from moonbitlang/zhiyuan/fix-dark-theme

fix: preserve theme
moonbitlang · Dec 26, 2024 · 14b50d4 · 14b50d4
2 parents 90493b5 + d4dfe80
commit 14b50d4
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 15 deletions.
diff --git a/moonbit-tour/index.html b/moonbit-tour/index.html
@@ -21,13 +21,13 @@
           <path
             stroke-linecap="round"
             stroke-linejoin="round"
-            d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"
+            d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z"
           />
         </svg>
       </div>
     </header>
     <main
-      class="flex flex-grow flex-col bg-gray-100 md:h-[calc(100vh-4rem)] md:flex-row dark:bg-zinc-800"
+      class="flex flex-grow flex-col bg-gray-100 dark:bg-zinc-800 md:h-[calc(100vh-4rem)] md:flex-row"
     >
       <section
         class="prose flex max-w-none flex-1 flex-col items-center gap-4 p-2 dark:prose-invert prose-h2:capitalize md:justify-between md:overflow-auto md:p-6"
@@ -40,16 +40,16 @@
         </nav>
       </section>
       <section
-        class="flex flex-1 flex-col justify-end border-t-2 border-purple-100 md:m-4 md:min-w-0 md:flex-1 md:rounded-md md:border dark:border-purple-800"
+        class="flex flex-1 flex-col justify-end border-t-2 border-purple-100 dark:border-purple-800 md:m-4 md:min-w-0 md:flex-1 md:rounded-md md:border"
       >
         <div
           id="editor"
-          class="max-h-96 min-h-60 flex-1 bg-white pl-[10px] pt-4 text-[14px] md:max-h-none md:rounded-t-md dark:bg-[#1e1e1e]"
+          class="max-h-96 min-h-60 flex-1 bg-white pl-[10px] pt-4 text-[14px] dark:bg-[#1e1e1e] md:max-h-none md:rounded-t-md"
         >
           %CODE%
         </div>
         <div
-          class="min-h-20 overflow-auto bg-gray-50 p-2 md:h-1/3 md:rounded-b-md dark:bg-zinc-900 dark:text-white"
+          class="min-h-20 overflow-auto bg-gray-50 p-2 dark:bg-zinc-900 dark:text-white md:h-1/3 md:rounded-b-md"
         >
           <pre id="output"></pre>
         </div>

diff --git a/moonbit-tour/src/main.ts b/moonbit-tour/src/main.ts
@@ -29,23 +29,32 @@ const moonSvg = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0
 </svg>
 `;
 
-let theme: "light" | "dark" = "light";
-// TODO: Preserve theme across multiple pages of the tour.
+type Theme = "light" | "dark";
 
+function getTheme(): Theme {
+  return (localStorage.getItem("theme") as Theme) ?? "light";
+}
+
+let theme: Theme = getTheme();
 const themeButton = document.querySelector<HTMLDivElement>("#theme")!;
+setTheme(theme);
 
-function toggleTheme() {
+function setTheme(theme: Theme) {
   if (theme === "light") {
-    theme = "dark";
-    document.querySelector("html")?.classList.add("dark");
-    monaco.editor.setTheme("dark-plus");
-    themeButton.innerHTML = moonSvg;
-  } else {
-    theme = "light";
     document.querySelector("html")?.classList.remove("dark");
     monaco.editor.setTheme("light-plus");
+    themeButton.innerHTML = moonSvg;
+  } else {
+    document.querySelector("html")?.classList.add("dark");
+    monaco.editor.setTheme("dark-plus");
     themeButton.innerHTML = sunSvg;
   }
+  localStorage.setItem("theme", theme);
+}
+
+function toggleTheme() {
+  theme = theme === "light" ? "dark" : "light";
+  setTheme(theme);
 }
 
 themeButton.addEventListener("click", toggleTheme);
@@ -116,7 +125,6 @@ monaco.editor.create(editor, {
     alwaysConsumeMouseWheel: false,
   },
   fontFamily: "monospace",
-  theme: "light-plus",
 });
 
 run();