Add dark mode

congle-engineer · Oct 9, 2024 · 8315806 · 8315806
1 parent c25538d
commit 8315806
Show file tree

Hide file tree

Showing 5 changed files with 480 additions and 432 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -26,7 +26,7 @@ export default function RootLayout({
       <body
         className={cn(inter.className, "dark:bg-slate-900 dark:text-slate-400")}
       >
-        <ThemeSwitcher />
+        {/* <ThemeSwitcher /> */}
         <div className="min-h-screen">{children}</div>
         <Footer />
       </body>

diff --git a/components/Intro.tsx b/components/Intro.tsx
@@ -1,4 +1,5 @@
 import { CMS_NAME } from "lib/constants";
+import { ThemeSwitcher } from "./ThemeSwitcher";
 
 export function Intro() {
   return (
@@ -16,6 +17,7 @@ export function Intro() {
         </a>{" "}
         and {CMS_NAME}.
       </h4>
+      <ThemeSwitcher />
     </section>
   );
 }
diff --git a/components/ThemeSwitcher.tsx b/components/ThemeSwitcher.tsx
@@ -22,12 +22,52 @@ export function ThemeSwitcher() {
     localStorage.setItem("theme", newTheme); // Save preference in localStorage
   };
 
+  // return (
+  //   <button
+  //     onClick={toggleTheme}
+  //     className="rounded-lg bg-gray-200 p-2 text-sm dark:bg-gray-800"
+  //   >
+  //     Toggle {theme === "light" ? "Dark" : "Light"} Mode
+  //   </button>
+  // );
+
   return (
     <button
       onClick={toggleTheme}
       className="rounded-lg bg-gray-200 p-2 text-sm dark:bg-gray-800"
     >
-      Toggle {theme === "light" ? "Dark" : "Light"} Mode
+      <span className="sr-only">Toggle mode</span>
+      {theme !== "dark" ? (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+          stroke="currentColor"
+          className="h-4 w-4"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M21.752 15.002A9.718 9.718 0 0118 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 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"
+          />
+        </svg>
+      ) : (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+          stroke="currentColor"
+          className="h-4 w-4"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"
+          />
+        </svg>
+      )}
     </button>
   );
 }
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "date-fns": "^4.1.0",
     "gray-matter": "^4.0.3",
     "next": "14.2.14",
+    "next-themes": "^0.3.0",
     "react": "^18",
     "react-dom": "^18",
     "remark": "^15.0.1",