dark mode (to be completed)

src/app/layout.tsx

@@ -1,9 +1,10 @@
-import React from "react";
 import "@/styles/globals.css";
 import type { Metadata } from "next";
 import localFont from "next/font/local";
 import { JetBrains_Mono, Noto_Sans, Noto_Serif } from "next/font/google";
 import Image from "next/image";
+import ThemeButton from "@/components/theme-button";
+import Link from "next/link";
 
 const materialSymbols = localFont({
   style: "normal",
@@ -83,13 +84,21 @@ export default function RootLayout({ children }: { children: any }) {
               <span>search</span>
             </div>
             <div>
-              <span>light_mode</span>
+              <ThemeButton />
             </div>
             <div className="h-10 w-9 px-0.5 py-0.5">
-              <Image src="/images/github-mark.svg" alt="github" width="36" height="42" />
+              <Link href="https://github.com/Cloud0310/next-blog">
+                {document.documentElement.classList.contains("dark") ? (
+                  <Image src="/images/github-mark-white.svg" alt="github" width="36" height="36" />
+                ) : (
+                  <Image src="/images/github-mark.svg" alt="github" width="36" height="36" />
+                )}
+              </Link>
             </div>
             <div>
-              <span>rss_feed</span>
+              <Link href="#">
+                <Image src="/images/rss.svg" alt="rss" width="36" height="36" />
+              </Link>
             </div>
           </div>
         </div>

src/components/theme-button.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Image from "next/image";
+
+export default function ThemeButton() {
+  const [theme, setTheme] = useState<"light" | "dark">(
+    window.matchMedia("(prefer-color-scheme: dark)") ? "dark" : "light"
+  );
+  function handleToggleTheme() {
+    if (theme === "dark") {
+      setTheme("light");
+      window.localStorage.setItem("theme", "light");
+    } else {
+      setTheme("dark");
+      window.localStorage.setItem("theme", "dark");
+    }
+  }
+  useEffect(() => {
+    if (window.localStorage.getItem("theme") === "dark" || (!("theme" in window.localStorage) && theme === "dark")) {
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+    }
+    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", e => {
+      if (e.matches) {
+        setTheme("dark");
+      } else {
+        setTheme("light");
+      }
+    });
+  }, [theme]);
+
+  return (
+    <button type="button" onClick={handleToggleTheme}>
+      {theme === "dark" ? (
+        <Image src="/images/light_mode.svg" alt="Light Mode" width="36" height="36" />
+      ) : (
+        <Image src="/images/dark_mode.svg" alt="Dark Mode" width="36" height="36" />
+      )}
+    </button>
+  );
+}

src/components/toc.tsx

@@ -2,6 +2,7 @@
 import { slug } from "github-slugger";
 import * as React from "react";
 import { useEffect, useState } from "react";
+import Link from "next/link";
 
 function prepareTitle(title: string) {
   return title.startsWith("#") ? title.substring(2) : title;
@@ -59,8 +60,7 @@ export default function Toc() {
     const observer = new IntersectionObserver(
       entries => {
         let i = 0;
-        for (; i < titles.length; i++)
-          if (titles[i].getBoundingClientRect().bottom > window.innerHeight / 2) break;
+        for (; i < titles.length; i++) if (titles[i].getBoundingClientRect().bottom > window.innerHeight / 2) break;
         setToActive(titleTree, titles[Math.max(0, i - 1)]);
       },
       {
@@ -71,8 +71,7 @@ export default function Toc() {
     const observer2 = new IntersectionObserver(
       entries => {
         let i = 0;
-        for (; i < titles.length; i++)
-          if (titles[i].getBoundingClientRect().bottom > window.innerHeight / 2) break;
+        for (; i < titles.length; i++) if (titles[i].getBoundingClientRect().bottom > window.innerHeight / 2) break;
         setToActive(titleTree, titles[Math.max(0, i - 1)]);
       },
       {
@@ -86,8 +85,7 @@ export default function Toc() {
     if (mainTitle) {
       const mainTitleObserver = new IntersectionObserver(
         entries => {
-          if (entries[0].isIntersecting)
-            setToActive(titleTree, titleTree[0].this);
+          if (entries[0].isIntersecting) setToActive(titleTree, titleTree[0].this);
         },
         {
           rootMargin: "-60px 0px 0px 0px",
@@ -108,35 +106,32 @@ export default function Toc() {
           {titleTree.map((titleL1: TreeNode, index: number) => {
             return (
               <li key={index}>
-                <a href={"#" + slug(titleL1.this.innerText)} className="group">
+                <Link href={"#" + slug(titleL1.this.innerText)} className="group">
                   <span className="hover:text-neutral-600 group-aria-[current=true]:text-primary-400">
                     {prepareTitle(titleL1.this.innerText)}
                   </span>
-                </a>
+                </Link>
                 <ul className="my-2 ml-3 leading-6">
                   {titleL1.children?.map((titleL2: TreeNode, index: number) => {
                     return (
                       <li key={index}>
-                        <a href={"#" + slug(titleL2.this.innerText)} className="group">
+                        <Link href={"#" + slug(titleL2.this.innerText)} className="group">
                           <span className="hover:text-neutral-600 group-aria-[current=true]:text-primary-400">
                             {prepareTitle(titleL2.this.innerText)}
                           </span>
-                        </a>
+                        </Link>
                         <ul className="my-2 ml-3 leading-6">
                           {titleL2.children?.map((titleL3: TreeNode, index: number) => {
                             return (
                               <li key={index}>
-                                <a href={"#" + slug(titleL3.this.innerText)} className="group">
+                                <Link href={"#" + slug(titleL3.this.innerText)} className="group">
                                   <span
-                                    className="group-aria-[current=true]:text-primary-4 00
-
-
-
-                                  hover:text-neutral-600"
+                                    className="hover:text-neutral-600
+                                  group-aria-[current=true]:text-primary-400"
                                   >
                                     {prepareTitle(titleL3.this.innerText)}
                                   </span>
-                                </a>
+                                </Link>
                               </li>
                             );
                           })}