feat: added light mode back

www/astro.config.mjs

@@ -8,5 +8,11 @@ import tailwind from "@astrojs/tailwind";
  */
 export default defineConfig({
   site: `https://create.t3.gg`,
+  markdown: {
+    shikiConfig: {
+      theme: "poimandres",
+      wrap: true,
+    },
+  },
   integrations: [react(), tailwind()],
 });

www/src/components/blog/pageContent.astro

@@ -50,8 +50,7 @@ const title = frontmatter.title;
 
   let blocks = document.querySelectorAll("pre");
   blocks.forEach((block) => {
-    block.className =
-      "relative flex max-w-xs sm:max-w-lg w-full h-full hover:cursor-pointer";
+    block.className = "relative flex w-full h-full hover:cursor-pointer";
     let copyButton = document.createElement("button");
     copyButton.className =
       "inline-flex absolute right-1 top-1 border border-slate-50 rounded-lg px-2 py-1 text-sm hover:text-slate-800 hover:bg-gray-100 focus:outline-none focus:shadow-outline text-brand-primary";

www/src/components/headCommon.astro

@@ -33,7 +33,6 @@ import "../styles/index.css";
   ) {
     root.classList.add("dark");
   } else {
-    // FIXME: Add back light theme
-    // root.classList.remove("dark");
+    root.classList.remove("dark");
   }
 </script>

www/src/components/navigation/ThemeToggleButton.tsx

@@ -33,28 +33,34 @@ const icons = [
 ];
 
 export default function ThemeToggleButton() {
-  const [theme, setTheme] = useState(() => {
-    if (import.meta.env.SSR) {
-      return undefined;
-    }
-    const item = localStorage.getItem("theme");
-    if (item) {
-      return item;
-    }
-    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-      return "dark";
-    }
-    return "light";
-  });
-
+  const [theme, setTheme] = useState<string | undefined>(undefined);
   useEffect(() => {
+    const init = () => {
+      if (typeof theme !== "string" && !import.meta.env.SSR) {
+        const item = localStorage.getItem("theme");
+        if (item) {
+          return setTheme(item);
+        }
+        if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+          return setTheme("dark");
+        }
+        return setTheme("light");
+      }
+    };
+
+    init();
+  }, [theme]);
+
+  const handleChange = (t: string) => {
     const root = document.documentElement;
-    if (theme === "light") {
+    setTheme(t);
+    localStorage.setItem("theme", t);
+    if (t === "light") {
       root.classList.remove("dark");
     } else {
       root.classList.add("dark");
     }
-  }, [theme]);
+  };
 
   return (
     <div className=" flex border border-slate-900 dark:border-white p-1 w-fit mx-auto rounded-full space-x-3">
@@ -82,10 +88,7 @@ export default function ThemeToggleButton() {
               value={t}
               title={`Use ${t} theme`}
               aria-label={`Use ${t} theme`}
-              onChange={() => {
-                localStorage.setItem("theme", t);
-                setTheme(t);
-              }}
+              onChange={() => handleChange(t)}
             />
           </label>
         );

www/src/components/navigation/leftSidebar.astro

@@ -22,7 +22,7 @@ const sidebar = SIDEBAR[langCode];
     <Search client:idle />
   </div>
   <ul
-    class="p-8 h-full overflow-x-visible overflow-y-scroll scrollbar-thin scrollbar-thumb-rounded-sm scrollbar-track-rounded-sm scrollbar-thumb-t3-purple-50 scrollbar-track-slate-600 sm:overflow-auto pb-32 dark:text-slate-50 text-slate-800"
+    class="p-8 h-full overflow-x-visible overflow-y-scroll scrollbar-thin scrollbar-thumb-rounded-sm scrollbar-track-rounded-sm scrollbar-thumb-t3-purple-300 scrollbar-track-slate-300 dark:scrollbar-thumb-t3-purple-50 dark:scrollbar-track-slate-600 sm:overflow-auto pb-32 dark:text-slate-50 text-slate-800"
   >
     {
       Object.entries(sidebar).map(([header, children]) => (
@@ -50,8 +50,8 @@ const sidebar = SIDEBAR[langCode];
                       class={`
                         ${
                           currentPageMatch === child.link
-                            ? "hover:text-t3-purple-300 dark:hover:text-t3-purple-100 text-t3-purple-300 dark:text-t3-purple-200 font-extrabold text-lg sm:text-base"
-                            : "hover:text-t3-purple-300 dark:hover:text-t3-purple-100 text-t3-purple-300 dark:text-t3-purple-200 text-lg sm:text-base"
+                            ? "hover:text-t3-purple-400 dark:hover:text-t3-purple-100 text-t3-purple-300 dark:text-t3-purple-200 font-extrabold text-lg sm:text-base"
+                            : "hover:text-t3-purple-400 dark:hover:text-t3-purple-100 text-t3-purple-300 dark:text-t3-purple-200 text-lg sm:text-base"
                         }
 
                         transition-colors

www/src/components/navigation/moreMenu.astro

@@ -1,5 +1,6 @@
 ---
 import * as CONFIG from "../../config";
+import ThemeToggleButton from "./ThemeToggleButton";
 //import ThemeToggleButton from "./ThemeToggleButton";
 
 export interface Props {
@@ -80,8 +81,7 @@ const showMoreSection = CONFIG.COMMUNITY_INVITE_URL;
       )
     }
   </ul>
-  <!-- FIXME: Add back light mode -->
-  <!-- <div class="m-8 text-center">
+  <div class="m-8 text-center">
     <ThemeToggleButton client:visible />
-  </div> -->
+  </div>
 </div>

www/src/components/navigation/navbar.astro

@@ -65,7 +65,7 @@ const navbarLinks: Array<{ href: string; label: string; newTab?: boolean }> = [
       <SidebarToggle currentPage={currentPage} client:idle />
     </div>
     <div
-      class="hidden md:block shadow-md shadow-slate-500 dark:shadow-slate-500/10 rounded-lg w-full max-w-xs"
+      class="hidden md:block shadow-sm dark:shadow-md shadow-slate-500 dark:shadow-slate-500/10 rounded-lg w-full max-w-xs"
     >
       <Search client:load />
     </div>

www/src/styles/global.css

@@ -69,16 +69,18 @@
   .markdown h3 {
     @apply mb-0 font-semibold;
   }
-  .markdown code {
-    @apply font-mono bg-t3-purple-200 dark:bg-[#0d1117] p-1 rounded-md dark:text-slate-50 text-xs cursor-text selection:bg-t3-purple-100 w-full whitespace-pre-wrap mx-auto;
-  }
+
   .markdown p > img {
     @apply text-sm mt-8;
   }
   .markdown table > tbody > tr > td > a {
     @apply break-all;
   }
 
+  .markdown table {
+    @apply max-w-full table-fixed;
+  }
+
   .markdown blockquote a {
     @apply text-slate-900 dark:text-t3-purple-50;
   }