From e1c7034322f16bc546a966ace5420c7a16de543d Mon Sep 17 00:00:00 2001
From: Tatsu723 <hiro723moto@gmail.com>
Date: Fri, 5 Sep 2025 15:17:19 +0900
Subject: [PATCH 1/8] =?UTF-8?q?=E3=83=86=E3=83=BC=E3=83=9E=E3=83=81?=
 =?UTF-8?q?=E3=82=A7=E3=83=B3=E3=82=B8=E6=A9=9F=E8=83=BD=E3=81=AE=E8=BF=BD?=
 =?UTF-8?q?=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/[docs_id]/markdown.tsx    | 308 +++++++++++++++++-----------------
 app/[docs_id]/themeToggle.tsx |  38 +++++
 app/globals.css               |   7 +-
 app/layout.tsx                |   2 +-
 app/sidebar.tsx               |   4 +-
 app/terminal/editor.tsx       |   3 +-
 6 files changed, 208 insertions(+), 154 deletions(-)
 create mode 100644 app/[docs_id]/themeToggle.tsx

diff --git a/app/[docs_id]/markdown.tsx b/app/[docs_id]/markdown.tsx
index cacf58f..9ae6958 100644
--- a/app/[docs_id]/markdown.tsx
+++ b/app/[docs_id]/markdown.tsx
@@ -5,166 +5,174 @@ import { PythonEmbeddedTerminal } from "../terminal/python/embedded";
 import { Heading } from "./section";
 import { AceLang, EditorComponent } from "../terminal/editor";
 import { ExecFile, ExecLang } from "../terminal/exec";
+import { ChangeTheme } from "./themeToggle";
+import { vscDarkPlus, prism } from "react-syntax-highlighter/dist/esm/styles/prism";
+
+
 
 export function StyledMarkdown({ content }: { content: string }) {
-  return (
-    <Markdown remarkPlugins={[remarkGfm]} components={components}>
-      {content}
-    </Markdown>
-  );
-}
+  const syntaxtheme = ChangeTheme() === "twilight" ? vscDarkPlus : prism;
 
-// TailwindCSSがh1などのタグのスタイルを消してしまうので、手動でスタイルを指定する必要がある
-const components: Components = {
-  h1: ({ children }) => <Heading level={1}>{children}</Heading>,
-  h2: ({ children }) => <Heading level={2}>{children}</Heading>,
-  h3: ({ children }) => <Heading level={3}>{children}</Heading>,
-  h4: ({ children }) => <Heading level={4}>{children}</Heading>,
-  h5: ({ children }) => <Heading level={5}>{children}</Heading>,
-  h6: ({ children }) => <Heading level={6}>{children}</Heading>,
-  p: ({ node, ...props }) => <p className="mx-2 my-2" {...props} />,
-  ul: ({ node, ...props }) => (
-    <ul className="list-disc list-outside ml-6 my-2" {...props} />
-  ),
-  ol: ({ node, ...props }) => (
-    <ol className="list-decimal list-outside ml-6 my-2" {...props} />
-  ),
-  li: ({ node, ...props }) => <li className="my-1" {...props} />,
-  a: ({ node, ...props }) => <a className="link link-info" {...props} />,
-  strong: ({ node, ...props }) => (
-    <strong className="text-primary" {...props} />
-  ),
-  table: ({ node, ...props }) => (
-    <div className="w-max max-w-full overflow-x-auto mx-auto my-2 rounded-lg border border-base-content/5 shadow-sm">
-      <table className="table w-max" {...props} />
-    </div>
-  ),
-  hr: ({ node, ...props }) => <hr className="border-primary my-4" {...props} />,
-  pre: ({ node, ...props }) => props.children,
-  code: ({ node, className, ref, style, ...props }) => {
-    const match = /^language-(\w+)(-repl|-exec|-readonly)?\:?(.+)?$/.exec(
-      className || ""
-    );
-    if (match) {
-      if (match[2] === "-exec" && match[3]) {
-        /*
-        ```python-exec:main.py
-        hello, world!
-        ```
-        ↓
-        ---------------------------
-         [▶ 実行] `python main.py`
+  // TailwindCSSがh1などのタグのスタイルを消してしまうので、手動でスタイルを指定する必要がある
+  const components: Components = {
+    h1: ({ children }) => <Heading level={1}>{children}</Heading>,
+    h2: ({ children }) => <Heading level={2}>{children}</Heading>,
+    h3: ({ children }) => <Heading level={3}>{children}</Heading>,
+    h4: ({ children }) => <Heading level={4}>{children}</Heading>,
+    h5: ({ children }) => <Heading level={5}>{children}</Heading>,
+    h6: ({ children }) => <Heading level={6}>{children}</Heading>,
+    p: ({ node, ...props }) => <p className="mx-2 my-2" {...props} />,
+    ul: ({ node, ...props }) => (
+      <ul className="list-disc list-outside ml-6 my-2" {...props} />
+    ),
+    ol: ({ node, ...props }) => (
+      <ol className="list-decimal list-outside ml-6 my-2" {...props} />
+    ),
+    li: ({ node, ...props }) => <li className="my-1" {...props} />,
+    a: ({ node, ...props }) => <a className="link link-info" {...props} />,
+    strong: ({ node, ...props }) => (
+      <strong className="text-primary" {...props} />
+    ),
+    table: ({ node, ...props }) => (
+      <div className="w-max max-w-full overflow-x-auto mx-auto my-2 rounded-lg border border-base-content/5 shadow-sm">
+        <table className="table w-max" {...props} />
+      </div>
+    ),
+    hr: ({ node, ...props }) => <hr className="border-primary my-4" {...props} />,
+    pre: ({ node, ...props }) => props.children,
+    code: ({ node, className, ref, style, ...props }) => {
+      const match = /^language-(\w+)(-repl|-exec|-readonly)?\:?(.+)?$/.exec(
+        className || ""
+      );
+      if (match) {
+        if (match[2] === "-exec" && match[3]) {
+          /*
+          ```python-exec:main.py
           hello, world!
-        ---------------------------
-        */
-        let execLang: ExecLang | undefined = undefined;
-        switch (match[1]) {
-          case "python":
-            execLang = "python";
-            break;
-          case "cpp":
-          case "c++":
-            execLang = "cpp";
-            break;
-          default:
-            console.warn(`Unsupported language for exec: ${match[1]}`);
-            break;
-        }
-        if (execLang) {
+          ```
+          ↓
+          ---------------------------
+          [▶ 実行] `python main.py`
+            hello, world!
+          ---------------------------
+          */
+          let execLang: ExecLang | undefined = undefined;
+          switch (match[1]) {
+            case "python":
+              execLang = "python";
+              break;
+            case "cpp":
+            case "c++":
+              execLang = "cpp";
+              break;
+            default:
+              console.warn(`Unsupported language for exec: ${match[1]}`);
+              break;
+          }
+          if (execLang) {
+            return (
+              <div className="border border-primary border-2 shadow-md m-2 rounded-lg">
+                <ExecFile
+                  language={execLang}
+                  filenames={match[3].split(",")}
+                  content={String(props.children || "").replace(/\n$/, "")}
+                />
+              </div>
+            );
+          }
+        } else if (match[3]) {
+          // ファイル名指定がある場合、ファイルエディター
+          let aceLang: AceLang | undefined = undefined;
+          switch (match[1]) {
+            case "python":
+              aceLang = "python";
+              break;
+            case "cpp":
+            case "c++":
+              aceLang = "c_cpp";
+              break;
+            case "json":
+              aceLang = "json";
+              break;
+            case "csv":
+              aceLang = "csv";
+              break;
+            case "text":
+            case "txt":
+              aceLang = "text";
+              break;
+            default:
+              console.warn(`Unsupported language for editor: ${match[1]}`);
+              break;
+          }
           return (
             <div className="border border-primary border-2 shadow-md m-2 rounded-lg">
-              <ExecFile
-                language={execLang}
-                filenames={match[3].split(",")}
-                content={String(props.children || "").replace(/\n$/, "")}
+              <EditorComponent
+                language={aceLang}
+                tabSize={4}
+                filename={match[3]}
+                readonly={match[2] === "-readonly"}
+                initContent={String(props.children || "").replace(/\n$/, "")}
               />
             </div>
           );
-        }
-      } else if (match[3]) {
-        // ファイル名指定がある場合、ファイルエディター
-        let aceLang: AceLang | undefined = undefined;
-        switch (match[1]) {
-          case "python":
-            aceLang = "python";
-            break;
-          case "cpp":
-          case "c++":
-            aceLang = "c_cpp";
-            break;
-          case "json":
-            aceLang = "json";
-            break;
-          case "csv":
-            aceLang = "csv";
-            break;
-          case "text":
-          case "txt":
-            aceLang = "text";
-            break;
-          default:
-            console.warn(`Unsupported language for editor: ${match[1]}`);
-            break;
+        } else if (match[2] === "-repl") {
+          // repl付きの言語指定
+          // 現状はPythonのみ対応
+          switch (match[1]) {
+            case "python":
+              return (
+                <div className="bg-base-300 border border-primary border-2 shadow-md m-2 p-4 pr-1 rounded-lg">
+                  <PythonEmbeddedTerminal
+                    content={String(props.children || "").replace(/\n$/, "")}
+                  />
+                </div>
+              );
+            default:
+              console.warn(`Unsupported language for repl: ${match[1]}`);
+              break;
+          }
         }
         return (
-          <div className="border border-primary border-2 shadow-md m-2 rounded-lg">
-            <EditorComponent
-              language={aceLang}
-              tabSize={4}
-              filename={match[3]}
-              readonly={match[2] === "-readonly"}
-              initContent={String(props.children || "").replace(/\n$/, "")}
-            />
-          </div>
+          <SyntaxHighlighter
+            language={match[1]}
+            PreTag="div"
+            className="border border-base-300 mx-2 my-2 rounded-lg text-sm! m-2! p-4!"
+            style={syntaxtheme}
+            {...props}
+          >
+            {String(props.children || "").replace(/\n$/, "")}
+          </SyntaxHighlighter>
+        );
+      } else if (String(props.children).includes("\n")) {
+        // 言語指定なしコードブロック
+        return (
+          <SyntaxHighlighter
+            PreTag="div"
+            className="border border-base-300 mx-2 my-2 rounded-lg text-sm! m-2! p-4!"
+            style={syntaxtheme}
+            {...props}
+          >
+            {String(props.children || "").replace(/\n$/, "")}
+          </SyntaxHighlighter>
+        );
+      } else {
+        // inline
+        return (
+          <code
+            className="bg-base-200/60 border border-base-300 px-1 py-0.5 rounded text-sm "
+            {...props}
+          />
         );
-      } else if (match[2] === "-repl") {
-        // repl付きの言語指定
-        // 現状はPythonのみ対応
-        switch (match[1]) {
-          case "python":
-            return (
-              <div className="bg-base-300 border border-primary border-2 shadow-md m-2 p-4 pr-1 rounded-lg">
-                <PythonEmbeddedTerminal
-                  content={String(props.children || "").replace(/\n$/, "")}
-                />
-              </div>
-            );
-          default:
-            console.warn(`Unsupported language for repl: ${match[1]}`);
-            break;
-        }
       }
-      return (
-        <SyntaxHighlighter
-          language={match[1]}
-          PreTag="div"
-          className="border border-base-300 mx-2 my-2 rounded-lg text-sm! m-2! p-4!"
-          // style={todo dark theme?}
-          {...props}
-        >
-          {String(props.children || "").replace(/\n$/, "")}
-        </SyntaxHighlighter>
-      );
-    } else if (String(props.children).includes("\n")) {
-      // 言語指定なしコードブロック
-      return (
-        <SyntaxHighlighter
-          PreTag="div"
-          className="border border-base-300 mx-2 my-2 rounded-lg text-sm! m-2! p-4!"
-          // style={todo dark theme?}
-          {...props}
-        >
-          {String(props.children || "").replace(/\n$/, "")}
-        </SyntaxHighlighter>
-      );
-    } else {
-      // inline
-      return (
-        <code
-          className="bg-base-200/60 border border-base-300 px-1 py-0.5 rounded text-sm "
-          {...props}
-        />
-      );
-    }
-  },
-};
+    },
+  };
+
+  return (
+    <Markdown remarkPlugins={[remarkGfm]} components={components}>
+      {content}
+    </Markdown>
+  );
+}
+
+
diff --git a/app/[docs_id]/themeToggle.tsx b/app/[docs_id]/themeToggle.tsx
new file mode 100644
index 0000000..59cac2d
--- /dev/null
+++ b/app/[docs_id]/themeToggle.tsx
@@ -0,0 +1,38 @@
+"use client";
+import { useState, useEffect } from "react";
+
+export function ChangeTheme(){
+    const [theme, setTheme] = useState("tomorrow");
+      useEffect(() => {
+        const updateTheme = () => {
+          const theme = document.documentElement.getAttribute("data-theme");
+          setTheme(theme === "dark" ? "twilight" : "tomorrow");
+        };
+    
+        const observer = new MutationObserver(updateTheme);
+        observer.observe(document.documentElement, {
+          attributes: true,
+          attributeFilter: ["data-theme"],
+        });
+    
+        updateTheme(); // 初回実行
+    
+        return () => observer.disconnect();
+      }, []);
+    return theme;
+
+};
+export function ThemeToggle() {
+  return (
+    <input
+      type="checkbox"
+      className="toggle theme-controller"
+      style={{ marginLeft: "1em" }}
+      onChange={(e) => {
+        const isDark = e.target.checked;
+        const theme = isDark ? "dark" : "light";
+        document.documentElement.setAttribute("data-theme", theme);
+      }}
+    />
+  );
+}
diff --git a/app/globals.css b/app/globals.css
index b9dbd27..eab4530 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,5 +1,10 @@
 @import "tailwindcss";
-@plugin "daisyui";
+@plugin "daisyui"
+{
+  themes: light --default, dark --prefersdark;
+};
+
+
 
 /* inconsolata-latin-wght-normal */
 @font-face {
diff --git a/app/layout.tsx b/app/layout.tsx
index fdf20a1..f805108 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -16,7 +16,7 @@ export default function RootLayout({
   children,
 }: Readonly<{ children: ReactNode }>) {
   return (
-    <html lang="ja">
+    <html lang="ja" data-theme="light">
       <body className="w-screen h-screen">
         <div className="drawer lg:drawer-open">
           <input id="drawer-toggle" type="checkbox" className="drawer-toggle" />
diff --git a/app/sidebar.tsx b/app/sidebar.tsx
index 3d2d81d..43895fa 100644
--- a/app/sidebar.tsx
+++ b/app/sidebar.tsx
@@ -4,6 +4,7 @@ import { usePathname } from "next/navigation";
 import useSWR, { Fetcher } from "swr";
 import { splitMarkdown } from "./[docs_id]/splitMarkdown";
 import { pagesList } from "./pagesList";
+import { ThemeToggle } from "./[docs_id]/themeToggle";
 
 const fetcher: Fetcher<string, string> = (url) =>
   fetch(url).then((r) => r.text());
@@ -12,7 +13,7 @@ export function Sidebar() {
   const pathname = usePathname();
   const docs_id = pathname.replace(/^\//, "");
   const { data, error, isLoading } = useSWR(`/docs/${docs_id}.md`, fetcher);
-
+  
   if (error) console.error("Sidebar fetch error:", error);
 
   const splitmdcontent = splitMarkdown(data ?? "");
@@ -22,6 +23,7 @@ export function Sidebar() {
       <h2 className="hidden lg:block text-xl font-bold p-4">
         {/* サイドバーが常時表示されている場合のみ */}
         Navbar Title
+        <ThemeToggle />
       </h2>
 
       <ul className="menu w-full">
diff --git a/app/terminal/editor.tsx b/app/terminal/editor.tsx
index 57d8c38..bd05bd1 100644
--- a/app/terminal/editor.tsx
+++ b/app/terminal/editor.tsx
@@ -16,6 +16,7 @@ import "ace-builds/src-min-noconflict/mode-text";
 import { useEffect } from "react";
 import { useSectionCode } from "../[docs_id]/section";
 import clsx from "clsx";
+import { ChangeTheme } from "../[docs_id]/themeToggle";
 // snippetを有効化するにはsnippetもimportする必要がある: import "ace-builds/src-min-noconflict/snippets/python";
 
 // mode-xxxx.js のファイル名と、AceEditorの mode プロパティの値が対応する
@@ -87,7 +88,7 @@ export function EditorComponent(props: EditorProps) {
       <AceEditor
         name={`ace-editor-${props.filename}`}
         mode={props.language}
-        theme="tomorrow" // TODO dark theme
+        theme={ChangeTheme()}
         tabSize={props.tabSize}
         width="100%"
         height={

From 48ad6bb51be83918f209ec24a5f50782bad2c49f Mon Sep 17 00:00:00 2001
From: Tatsu723 <hiro723moto@gmail.com>
Date: Wed, 10 Sep 2025 15:00:19 +0900
Subject: [PATCH 2/8] =?UTF-8?q?=E3=83=86=E3=83=BC=E3=83=9E=E5=88=87?=
 =?UTF-8?q?=E3=82=8A=E6=9B=BF=E3=81=88=E3=81=AE=E3=82=B3=E3=83=BC=E3=83=89?=
 =?UTF-8?q?=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/[docs_id]/markdown.tsx    | 239 +++++++++++++++++-----------------
 app/[docs_id]/themeToggle.tsx |   2 +-
 app/terminal/editor.tsx       |   4 +-
 app/terminal/terminal.tsx     |  26 +++-
 package-lock.json             |  18 +--
 package.json                  |   4 +-
 6 files changed, 156 insertions(+), 137 deletions(-)

diff --git a/app/[docs_id]/markdown.tsx b/app/[docs_id]/markdown.tsx
index a6f01e4..20fd5d6 100644
--- a/app/[docs_id]/markdown.tsx
+++ b/app/[docs_id]/markdown.tsx
@@ -5,7 +5,7 @@ import { PythonEmbeddedTerminal } from "../terminal/python/embedded";
 import { Heading } from "./section";
 import { type AceLang, EditorComponent } from "../terminal/editor";
 import { ExecFile, ExecLang } from "../terminal/exec";
-import { ChangeTheme } from "./themeToggle";
+import { useChangeTheme } from "./themeToggle";
 import { tomorrow } from "react-syntax-highlighter/dist/esm/styles/hljs";
 import { twilight } from "react-syntax-highlighter/dist/esm/styles/prism";
 
@@ -45,130 +45,133 @@ const components: Components = {
   ),
   hr: ({ node, ...props }) => <hr className="border-primary my-4" {...props} />,
   pre: ({ node, ...props }) => props.children,
-  code: ({ node, className, ref, style, ...props }) => {
-    const match = /^language-(\w+)(-repl|-exec|-readonly)?\:?(.+)?$/.exec(
-      className || ""
-    );
-    if (match) {
-      if (match[2] === "-exec" && match[3]) {
-        /*
-        ```python-exec:main.py
+  code: ({ node, className, ref, style, ...props }) => <CodeComponent {...{ node, className, ref, style, ...props }} />,
+};
+function CodeComponent({ node,  className, ref, style, ...props }: { node: any; className?: string; ref?: any; style?: any; [key: string]: any }) {
+  const theme = useChangeTheme();
+  const codetheme= theme === "tomorrow" ? tomorrow : twilight;
+  const match = /^language-(\w+)(-repl|-exec|-readonly)?\:?(.+)?$/.exec(
+    className || ""
+  );
+  if (match) {
+    if (match[2] === "-exec" && match[3]) {
+      /*
+      ```python-exec:main.py
+      hello, world!
+      ```
+      ↓
+      ---------------------------
+       [▶ 実行] `python main.py`
         hello, world!
-        ```
-        ↓
-        ---------------------------
-         [▶ 実行] `python main.py`
-          hello, world!
-        ---------------------------
-        */
-        let execLang: ExecLang | undefined = undefined;
-        switch (match[1]) {
-          case "python":
-            execLang = "python";
-            break;
-          case "cpp":
-          case "c++":
-            execLang = "cpp";
-            break;
-          default:
-            console.warn(`Unsupported language for exec: ${match[1]}`);
-            break;
-        }
-        if (execLang) {
-          return (
-            <div className="border border-primary border-2 shadow-md m-2 rounded-lg">
-              <ExecFile
-                language={execLang}
-                filenames={match[3].split(",")}
-                content={String(props.children || "").replace(/\n$/, "")}
-              />
-            </div>
-          );
-        }
-      } else if (match[3]) {
-        // ファイル名指定がある場合、ファイルエディター
-        let aceLang: AceLang | undefined = undefined;
-        switch (match[1]) {
-          case "python":
-            aceLang = "python";
-            break;
-          case "cpp":
-          case "c++":
-            aceLang = "c_cpp";
-            break;
-          case "json":
-            aceLang = "json";
-            break;
-          case "csv":
-            aceLang = "csv";
-            break;
-          case "text":
-          case "txt":
-            aceLang = "text";
-            break;
-          default:
-            console.warn(`Unsupported language for editor: ${match[1]}`);
-            break;
-        }
+      ---------------------------
+      */
+      let execLang: ExecLang | undefined = undefined;
+      switch (match[1]) {
+        case "python":
+          execLang = "python";
+          break;
+        case "cpp":
+        case "c++":
+          execLang = "cpp";
+          break;
+        default:
+          console.warn(`Unsupported language for exec: ${match[1]}`);
+          break;
+      }
+      if (execLang) {
         return (
           <div className="border border-primary border-2 shadow-md m-2 rounded-lg">
-            <EditorComponent
-              language={aceLang}
-              tabSize={4}
-              filename={match[3]}
-              readonly={match[2] === "-readonly"}
-              initContent={String(props.children || "").replace(/\n$/, "")}
+            <ExecFile
+              language={execLang}
+              filenames={match[3].split(",")}
+              content={String(props.children || "").replace(/\n$/, "")}
             />
           </div>
         );
-      } else if (match[2] === "-repl") {
-        // repl付きの言語指定
-        // 現状はPythonのみ対応
-        switch (match[1]) {
-          case "python":
-            return (
-              <div className="bg-base-300 border border-primary border-2 shadow-md m-2 p-4 pr-1 rounded-lg">
-                <PythonEmbeddedTerminal
-                  content={String(props.children || "").replace(/\n$/, "")}
-                />
-              </div>
-            );
-          default:
-            console.warn(`Unsupported language for repl: ${match[1]}`);
-            break;
-        }
+      }
+    } else if (match[3]) {
+      // ファイル名指定がある場合、ファイルエディター
+      let aceLang: AceLang | undefined = undefined;
+      switch (match[1]) {
+        case "python":
+          aceLang = "python";
+          break;
+        case "cpp":
+        case "c++":
+          aceLang = "c_cpp";
+          break;
+        case "json":
+          aceLang = "json";
+          break;
+        case "csv":
+          aceLang = "csv";
+          break;
+        case "text":
+        case "txt":
+          aceLang = "text";
+          break;
+        default:
+          console.warn(`Unsupported language for editor: ${match[1]}`);
+          break;
       }
       return (
-        <SyntaxHighlighter
-          language={match[1]}
-          PreTag="div"
-          className="border border-base-content/50 mx-2 my-2 rounded-lg text-sm p-4!"
-          style={tomorrow} // todo dark theme (editor.tsx で指定したのと同じテーマを選ぶようにすること)
-          {...props}
-        >
-          {String(props.children || "").replace(/\n$/, "")}
-        </SyntaxHighlighter>
-      );
-    } else if (String(props.children).includes("\n")) {
-      // 言語指定なしコードブロック
-      return (
-        <SyntaxHighlighter
-          PreTag="div"
-          className="border border-base-content/50 mx-2 my-2 rounded-lg text-sm p-4!"
-          style={tomorrow} // todo dark theme
-          {...props}
-        >
-          {String(props.children || "").replace(/\n$/, "")}
-        </SyntaxHighlighter>
-      );
-    } else {
-      // inline
-      return (
-        <code
-          className="bg-base-200/60 border border-base-300 px-1 py-0.5 rounded text-sm "
-          {...props}
-        />
+        <div className="border border-primary border-2 shadow-md m-2 rounded-lg">
+          <EditorComponent
+            language={aceLang}
+            tabSize={4}
+            filename={match[3]}
+            readonly={match[2] === "-readonly"}
+            initContent={String(props.children || "").replace(/\n$/, "")}
+          />
+        </div>
       );
+    } else if (match[2] === "-repl") {
+      // repl付きの言語指定
+      // 現状はPythonのみ対応
+      switch (match[1]) {
+        case "python":
+          return (
+            <div className="bg-base-300 border border-primary border-2 shadow-md m-2 p-4 pr-1 rounded-lg">
+              <PythonEmbeddedTerminal
+                content={String(props.children || "").replace(/\n$/, "")}
+              />
+            </div>
+          );
+        default:
+          console.warn(`Unsupported language for repl: ${match[1]}`);
+          break;
+      }
     }
-  },
-};
+    return (
+      <SyntaxHighlighter
+        language={match[1]}
+        PreTag="div"
+        className="border border-base-content/50 mx-2 my-2 rounded-lg text-sm p-4!"
+        style={codetheme}
+        {...props}
+      >
+        {String(props.children || "").replace(/\n$/, "")}
+      </SyntaxHighlighter>
+    );
+  } else if (String(props.children).includes("\n")) {
+    // 言語指定なしコードブロック
+    return (
+      <SyntaxHighlighter
+        PreTag="div"
+        className="border border-base-content/50 mx-2 my-2 rounded-lg text-sm p-4!"
+        style={codetheme}
+        {...props}
+      >
+        {String(props.children || "").replace(/\n$/, "")}
+      </SyntaxHighlighter>
+    );
+  } else {
+    // inline
+    return (
+      <code
+        className="bg-base-200/60 border border-base-300 px-1 py-0.5 rounded text-sm "
+        {...props}
+      />
+    );
+  }
+}
diff --git a/app/[docs_id]/themeToggle.tsx b/app/[docs_id]/themeToggle.tsx
index 59cac2d..8a42a2f 100644
--- a/app/[docs_id]/themeToggle.tsx
+++ b/app/[docs_id]/themeToggle.tsx
@@ -1,7 +1,7 @@
 "use client";
 import { useState, useEffect } from "react";
 
-export function ChangeTheme(){
+export function useChangeTheme(){
     const [theme, setTheme] = useState("tomorrow");
       useEffect(() => {
         const updateTheme = () => {
diff --git a/app/terminal/editor.tsx b/app/terminal/editor.tsx
index 49ad857..d2e5e46 100644
--- a/app/terminal/editor.tsx
+++ b/app/terminal/editor.tsx
@@ -21,7 +21,7 @@ import { useFile } from "./file";
 import { useEffect } from "react";
 import { useSectionCode } from "../[docs_id]/section";
 import clsx from "clsx";
-import { ChangeTheme } from "../[docs_id]/themeToggle";
+import { useChangeTheme } from "../[docs_id]/themeToggle";
 // snippetを有効化するにはsnippetもimportする必要がある: import "ace-builds/src-min-noconflict/snippets/python";
 
 // mode-xxxx.js のファイル名と、AceEditorの mode プロパティの値が対応する
@@ -87,7 +87,7 @@ export function EditorComponent(props: EditorProps) {
       <AceEditor
         name={`ace-editor-${props.filename}`}
         mode={props.language}
-        theme={ChangeTheme()}
+        theme={useChangeTheme()}
         tabSize={props.tabSize}
         width="100%"
         height={
diff --git a/app/terminal/terminal.tsx b/app/terminal/terminal.tsx
index dd2f111..8486825 100644
--- a/app/terminal/terminal.tsx
+++ b/app/terminal/terminal.tsx
@@ -1,11 +1,12 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { use, useEffect, useRef, useState } from "react";
 import { Terminal } from "@xterm/xterm";
 import { FitAddon } from "@xterm/addon-fit";
 import "@xterm/xterm/css/xterm.css";
 import chalk from "chalk";
-
+import { useChangeTheme } from "../[docs_id]/themeToggle";
+import { th } from "zod/locales";
 /**
  * 文字列の幅を計算する。
  * 厳密にやるなら @xterm/xterm/src/common/input/UnicodeV6.ts を使うとよさそう
@@ -61,16 +62,15 @@ export function useTerminal(props: TerminalProps) {
   const terminalInstanceRef = useRef<Terminal | null>(null);
   const fitAddonRef = useRef<FitAddon | null>(null);
   const [termReady, setTermReady] = useState<boolean>(false);
-
+  const theme = useChangeTheme();
   const getRowsRef = useRef<(cols: number) => number>(undefined);
   getRowsRef.current = props.getRows;
   const onReadyRef = useRef<() => void>(undefined);
   onReadyRef.current = props.onReady;
-
+  
   // ターミナルの初期化処理
   useEffect(() => {
     const abortController = new AbortController();
-
     // globals.cssでフォントを指定し読み込んでいるが、
     // それが読み込まれる前にterminalを初期化してしまうとバグる。
     document.fonts.load("0.875rem Inconsolata Variable").then(() => {
@@ -150,5 +150,21 @@ export function useTerminal(props: TerminalProps) {
     };
   }, []);
 
+  // テーマが変わったときにterminalのテーマを更新する
+  useEffect(() => {
+  if (terminalInstanceRef.current) {
+    const fromCSS = (varName: string) =>
+      window.getComputedStyle(document.body).getPropertyValue(varName);
+
+    terminalInstanceRef.current.options = ({
+      theme: {
+        background: fromCSS(theme === "tomorrow" ? "--color-base-300" : "--color-neutral-900"),
+        foreground: fromCSS("--color-base-content")
+      }
+    });
+  }
+}, [theme]);
+
+
   return { terminalRef, terminalInstanceRef, termReady };
 }
diff --git a/package-lock.json b/package-lock.json
index 11c511b..934da71 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "my-code",
       "version": "0.1.0",
       "dependencies": {
-        "@fontsource-variable/inconsolata": "^5.2.6",
+        "@fontsource-variable/inconsolata": "^5.2.7",
         "@fontsource-variable/noto-sans-jp": "^5.2.6",
         "@google/generative-ai": "^0.24.1",
         "@opennextjs/cloudflare": "^1.7.1",
@@ -25,7 +25,7 @@
         "react-ace": "^14.0.1",
         "react-dom": "19.1.0",
         "react-markdown": "^10.1.0",
-        "react-syntax-highlighter": "^15.6.1",
+        "react-syntax-highlighter": "^15.6.6",
         "remark-gfm": "^4.0.1",
         "swr": "^2.3.6",
         "zod": "^4.0.17"
@@ -8394,9 +8394,9 @@
       }
     },
     "node_modules/@fontsource-variable/inconsolata": {
-      "version": "5.2.6",
-      "resolved": "https://registry.npmjs.org/@fontsource-variable/inconsolata/-/inconsolata-5.2.6.tgz",
-      "integrity": "sha512-lODgGNXKm7/PkAwnqDwiMrRbct/Lg4NqlcBwSXpaqFHmrVycLSS7oPZ/AshbDkLNJXv8yjGkqAr5oOGsgUE1QA==",
+      "version": "5.2.7",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/inconsolata/-/inconsolata-5.2.7.tgz",
+      "integrity": "sha512-vRCuyz9l7oHeU77Ed0+slKKf0oIx2Tq8/VkyH48tkclO6AySMLFmRZznm9SUyx1QqlMsqCDMF2KK0ysY5vJvWg==",
       "license": "OFL-1.1",
       "funding": {
         "url": "https://github.com/sponsors/ayuhito"
@@ -18314,16 +18314,16 @@
       }
     },
     "node_modules/react-syntax-highlighter": {
-      "version": "15.6.1",
-      "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.6.1.tgz",
-      "integrity": "sha512-OqJ2/vL7lEeV5zTJyG7kmARppUjiB9h9udl4qHQjjgEos66z00Ia0OckwYfRxCSFrW8RJIBnsBwQsHZbVPspqg==",
+      "version": "15.6.6",
+      "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.6.6.tgz",
+      "integrity": "sha512-DgXrc+AZF47+HvAPEmn7Ua/1p10jNoVZVI/LoPiYdtY+OM+/nG5yefLHKJwdKqY1adMuHFbeyBaG9j64ML7vTw==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.3.1",
         "highlight.js": "^10.4.1",
         "highlightjs-vue": "^1.0.0",
         "lowlight": "^1.17.0",
-        "prismjs": "^1.27.0",
+        "prismjs": "^1.30.0",
         "refractor": "^3.6.0"
       },
       "peerDependencies": {
diff --git a/package.json b/package.json
index 65daa89..937f20e 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
     "cf-typegen": "wrangler types --env-interface CloudflareEnv cloudflare-env.d.ts"
   },
   "dependencies": {
-    "@fontsource-variable/inconsolata": "^5.2.6",
+    "@fontsource-variable/inconsolata": "^5.2.7",
     "@fontsource-variable/noto-sans-jp": "^5.2.6",
     "@google/generative-ai": "^0.24.1",
     "@opennextjs/cloudflare": "^1.7.1",
@@ -31,7 +31,7 @@
     "react-ace": "^14.0.1",
     "react-dom": "19.1.0",
     "react-markdown": "^10.1.0",
-    "react-syntax-highlighter": "^15.6.1",
+    "react-syntax-highlighter": "^15.6.6",
     "remark-gfm": "^4.0.1",
     "swr": "^2.3.6",
     "zod": "^4.0.17"

From b73dabe3a14736ee5fa931f94e82f8547fda5f15 Mon Sep 17 00:00:00 2001
From: Tatsu723 <hiro723moto@gmail.com>
Date: Mon, 22 Sep 2025 15:56:56 +0900
Subject: [PATCH 3/8] =?UTF-8?q?=E3=83=A6=E3=83=BC=E3=82=B6=E6=8C=87?=
 =?UTF-8?q?=E5=AE=9A=E3=81=AE=E3=83=86=E3=83=BC=E3=83=9E=E3=83=BB=E7=94=BB?=
 =?UTF-8?q?=E9=9D=A2=E3=81=A8=E3=81=AE=E9=80=A3=E5=8B=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/[docs_id]/themeToggle.tsx | 44 +++++++++++++++++++++++++++++++----
 app/layout.tsx                |  2 +-
 app/navbar.tsx                |  8 ++++---
 app/sidebar.tsx               |  6 +++--
 app/terminal/terminal.tsx     |  4 ++--
 5 files changed, 52 insertions(+), 12 deletions(-)

diff --git a/app/[docs_id]/themeToggle.tsx b/app/[docs_id]/themeToggle.tsx
index 8a42a2f..31e8e35 100644
--- a/app/[docs_id]/themeToggle.tsx
+++ b/app/[docs_id]/themeToggle.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { useState, useEffect } from "react";
+import { useState, useEffect} from "react";
 
 export function useChangeTheme(){
     const [theme, setTheme] = useState("tomorrow");
@@ -23,16 +23,52 @@ export function useChangeTheme(){
 
 };
 export function ThemeToggle() {
+  const [isChecked, setIsChecked] = useState(false);
+  useEffect(() => {
+    const checkIsDarkSchemePreferred = () =>
+      window?.matchMedia?.('(prefers-color-scheme:dark)')?.matches ?? false;
+      setIsChecked(checkIsDarkSchemePreferred());
+  }, []);
+
   return (
+    <label className="flex cursor-pointer gap-2" style={{ marginLeft: "1em" }}>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round">
+    <circle cx="12" cy="12" r="5" />
+    <path
+      d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4" />
+  </svg>
     <input
       type="checkbox"
+      checked={isChecked}
       className="toggle theme-controller"
-      style={{ marginLeft: "1em" }}
       onChange={(e) => {
-        const isDark = e.target.checked;
-        const theme = isDark ? "dark" : "light";
+        const isdark = e.target.checked;
+        setIsChecked(isdark);
+        const theme = isdark ? "dark" : "light";
         document.documentElement.setAttribute("data-theme", theme);
       }}
     />
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round">
+    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+  </svg>
+</label>
   );
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index f77e91d..f6607e2 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -18,7 +18,7 @@ export default function RootLayout({
   children,
 }: Readonly<{ children: ReactNode }>) {
   return (
-    <html lang="ja" data-theme="light">
+    <html lang="ja">
       <body className="w-screen h-screen">
         <div className="drawer lg:drawer-open">
           <input id="drawer-toggle" type="checkbox" className="drawer-toggle" />
diff --git a/app/navbar.tsx b/app/navbar.tsx
index 5ec3f99..393a88c 100644
--- a/app/navbar.tsx
+++ b/app/navbar.tsx
@@ -1,3 +1,4 @@
+import { ThemeToggle } from "./[docs_id]/themeToggle";
 export function Navbar() {
   return (
     <div className="navbar bg-base-200 w-full">
@@ -23,9 +24,10 @@ export function Navbar() {
           </svg>
         </label>
       </div>
-      <div className="mx-2 flex-1 px-2 font-bold text-xl lg:hidden">
-        {/* タイトル(サイドバー非表示の場合のみ) */}
-        Navbar Title
+      <div className="mx-2 flex flex-row items-center px-2 font-bold text-xl lg:hidden">
+        {/* サイドバーが常時表示されている場合のみ */}
+        <span className="flex-1">Navbar Title</span>
+        <ThemeToggle />
       </div>
     </div>
   );
diff --git a/app/sidebar.tsx b/app/sidebar.tsx
index 43895fa..5c9d77b 100644
--- a/app/sidebar.tsx
+++ b/app/sidebar.tsx
@@ -20,12 +20,14 @@ export function Sidebar() {
   return (
     <div className="bg-base-200 h-full w-80 overflow-y-auto">
       {/* todo: 背景色ほんとにこれでいい？ */}
-      <h2 className="hidden lg:block text-xl font-bold p-4">
+      <h2 className="hidden lg:flex flex-row items-center text-xl font-bold p-4">
         {/* サイドバーが常時表示されている場合のみ */}
-        Navbar Title
+        <span className="flex-1">Navbar Title</span>
         <ThemeToggle />
       </h2>
 
+      
+
       <ul className="menu w-full">
         {pagesList.map((group) => (
           <li key={group.id}>
diff --git a/app/terminal/terminal.tsx b/app/terminal/terminal.tsx
index 8486825..b15fec8 100644
--- a/app/terminal/terminal.tsx
+++ b/app/terminal/terminal.tsx
@@ -1,12 +1,12 @@
 "use client";
 
-import { use, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Terminal } from "@xterm/xterm";
 import { FitAddon } from "@xterm/addon-fit";
 import "@xterm/xterm/css/xterm.css";
 import chalk from "chalk";
 import { useChangeTheme } from "../[docs_id]/themeToggle";
-import { th } from "zod/locales";
+
 /**
  * 文字列の幅を計算する。
  * 厳密にやるなら @xterm/xterm/src/common/input/UnicodeV6.ts を使うとよさそう

From f9a2e5fc088f370384bcd8a3ec4ed28881008542 Mon Sep 17 00:00:00 2001
From: Tatsu723 <hiro723moto@gmail.com>
Date: Mon, 22 Sep 2025 16:05:19 +0900
Subject: [PATCH 4/8] =?UTF-8?q?=E3=82=B3=E3=83=BC=E3=83=89=E6=95=B4?=
 =?UTF-8?q?=E5=BD=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/[docs_id]/markdown.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/[docs_id]/markdown.tsx b/app/[docs_id]/markdown.tsx
index 20fd5d6..ed5d3da 100644
--- a/app/[docs_id]/markdown.tsx
+++ b/app/[docs_id]/markdown.tsx
@@ -47,7 +47,7 @@ const components: Components = {
   pre: ({ node, ...props }) => props.children,
   code: ({ node, className, ref, style, ...props }) => <CodeComponent {...{ node, className, ref, style, ...props }} />,
 };
-function CodeComponent({ node,  className, ref, style, ...props }: { node: any; className?: string; ref?: any; style?: any; [key: string]: any }) {
+function CodeComponent({ node,  className, ref, style, ...props }: { node: unknown; className?: string; ref?: unknown; style?: unknown; [key: string]: unknown }) {
   const theme = useChangeTheme();
   const codetheme= theme === "tomorrow" ? tomorrow : twilight;
   const match = /^language-(\w+)(-repl|-exec|-readonly)?\:?(.+)?$/.exec(

From 89e2271bb37274573132565b8431665e18dc9c05 Mon Sep 17 00:00:00 2001
From: Tatsu723 <hiro723moto@gmail.com>
Date: Wed, 1 Oct 2025 09:09:34 +0900
Subject: [PATCH 5/8] =?UTF-8?q?=E3=82=B9=E3=83=9E=E3=83=9B=E7=94=A8?=
 =?UTF-8?q?=E3=83=88=E3=82=B0=E3=83=AB=E3=81=A8PC=E7=94=A8=E3=83=88?=
 =?UTF-8?q?=E3=82=B0=E3=83=AB=E3=81=AE=E9=80=A3=E5=8B=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/[docs_id]/themeToggle.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/app/[docs_id]/themeToggle.tsx b/app/[docs_id]/themeToggle.tsx
index 31e8e35..7b969e9 100644
--- a/app/[docs_id]/themeToggle.tsx
+++ b/app/[docs_id]/themeToggle.tsx
@@ -27,7 +27,20 @@ export function ThemeToggle() {
   useEffect(() => {
     const checkIsDarkSchemePreferred = () =>
       window?.matchMedia?.('(prefers-color-scheme:dark)')?.matches ?? false;
-      setIsChecked(checkIsDarkSchemePreferred());
+    setIsChecked(checkIsDarkSchemePreferred());
+
+    const updateChecked =() =>{
+      const theme= document.documentElement.getAttribute("data-theme");
+      setIsChecked(theme === "dark");
+    }
+
+    const observer = new MutationObserver(updateChecked);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-theme"],
+    });
+
+    return () => observer.disconnect();
   }, []);
 
   return (

From 4924cb77cc6290bd04ddda08f935db546a702aeb Mon Sep 17 00:00:00 2001
From: Tatsu723 <hiro723moto@gmail.com>
Date: Wed, 1 Oct 2025 16:58:53 +0900
Subject: [PATCH 6/8] =?UTF-8?q?=E3=82=B3=E3=83=BC=E3=83=89=E3=81=AE?=
 =?UTF-8?q?=E5=86=8D=E5=88=A9=E7=94=A8=EF=BC=8B=E3=83=95=E3=83=83=E3=82=AF?=
 =?UTF-8?q?=E5=91=BC=E3=81=B3=E5=87=BA=E3=81=97=E3=81=AE=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/[docs_id]/themeToggle.tsx | 32 ++++++++++++--------------------
 app/terminal/editor.tsx       |  3 ++-
 2 files changed, 14 insertions(+), 21 deletions(-)

diff --git a/app/[docs_id]/themeToggle.tsx b/app/[docs_id]/themeToggle.tsx
index 7b969e9..168d902 100644
--- a/app/[docs_id]/themeToggle.tsx
+++ b/app/[docs_id]/themeToggle.tsx
@@ -1,9 +1,16 @@
 "use client";
-import { useState, useEffect} from "react";
+import { useState, useEffect, use} from "react";
+import { set } from "zod";
 
 export function useChangeTheme(){
     const [theme, setTheme] = useState("tomorrow");
       useEffect(() => {
+        const checkIsDarkSchemePreferred = () =>
+          window?.matchMedia?.('(prefers-color-scheme:dark)')?.matches ?? false;
+        const initialTheme = checkIsDarkSchemePreferred() ? "dark" : "light";
+        document.documentElement.setAttribute("data-theme", initialTheme);
+        setTheme(initialTheme === "dark" ? "twilight" : "tomorrow");
+
         const updateTheme = () => {
           const theme = document.documentElement.getAttribute("data-theme");
           setTheme(theme === "dark" ? "twilight" : "tomorrow");
@@ -15,7 +22,6 @@ export function useChangeTheme(){
           attributeFilter: ["data-theme"],
         });
     
-        updateTheme(); // 初回実行
     
         return () => observer.disconnect();
       }, []);
@@ -24,25 +30,11 @@ export function useChangeTheme(){
 };
 export function ThemeToggle() {
   const [isChecked, setIsChecked] = useState(false);
+  const theme = useChangeTheme();
   useEffect(() => {
-    const checkIsDarkSchemePreferred = () =>
-      window?.matchMedia?.('(prefers-color-scheme:dark)')?.matches ?? false;
-    setIsChecked(checkIsDarkSchemePreferred());
-
-    const updateChecked =() =>{
-      const theme= document.documentElement.getAttribute("data-theme");
-      setIsChecked(theme === "dark");
-    }
-
-    const observer = new MutationObserver(updateChecked);
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ["data-theme"],
-    });
-
-    return () => observer.disconnect();
-  }, []);
-
+    setIsChecked(theme === "twilight");
+  }, [theme]);
+  
   return (
     <label className="flex cursor-pointer gap-2" style={{ marginLeft: "1em" }}>
   <svg
diff --git a/app/terminal/editor.tsx b/app/terminal/editor.tsx
index d2e5e46..93afa9f 100644
--- a/app/terminal/editor.tsx
+++ b/app/terminal/editor.tsx
@@ -35,6 +35,7 @@ interface EditorProps {
   readonly?: boolean;
 }
 export function EditorComponent(props: EditorProps) {
+  const theme= useChangeTheme();
   const { files, writeFile } = useFile();
   const code = files[props.filename] || props.initContent;
   const sectionContext = useSectionCode();
@@ -87,7 +88,7 @@ export function EditorComponent(props: EditorProps) {
       <AceEditor
         name={`ace-editor-${props.filename}`}
         mode={props.language}
-        theme={useChangeTheme()}
+        theme={theme}
         tabSize={props.tabSize}
         width="100%"
         height={

From db9f3122ac7c2cc3c84ef7644fd8e99cc1cb000b Mon Sep 17 00:00:00 2001
From: Tatsu723 <hiro723moto@gmail.com>
Date: Wed, 1 Oct 2025 17:05:53 +0900
Subject: [PATCH 7/8] =?UTF-8?q?=E6=95=B4=E5=BD=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/[docs_id]/themeToggle.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/[docs_id]/themeToggle.tsx b/app/[docs_id]/themeToggle.tsx
index 168d902..b976f32 100644
--- a/app/[docs_id]/themeToggle.tsx
+++ b/app/[docs_id]/themeToggle.tsx
@@ -1,6 +1,5 @@
 "use client";
-import { useState, useEffect, use} from "react";
-import { set } from "zod";
+import { useState, useEffect} from "react";
 
 export function useChangeTheme(){
     const [theme, setTheme] = useState("tomorrow");

From 2c05b7615eb3094748103343f695c56d5707b3e1 Mon Sep 17 00:00:00 2001
From: Tatsu723 <hiro723moto@gmail.com>
Date: Fri, 3 Oct 2025 16:23:14 +0900
Subject: [PATCH 8/8] =?UTF-8?q?themetoggle=E3=81=AE=E3=82=B3=E3=83=BC?=
 =?UTF-8?q?=E3=83=89=E6=94=B9=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/[docs_id]/themeToggle.tsx | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/app/[docs_id]/themeToggle.tsx b/app/[docs_id]/themeToggle.tsx
index b976f32..91b5404 100644
--- a/app/[docs_id]/themeToggle.tsx
+++ b/app/[docs_id]/themeToggle.tsx
@@ -4,11 +4,6 @@ import { useState, useEffect} from "react";
 export function useChangeTheme(){
     const [theme, setTheme] = useState("tomorrow");
       useEffect(() => {
-        const checkIsDarkSchemePreferred = () =>
-          window?.matchMedia?.('(prefers-color-scheme:dark)')?.matches ?? false;
-        const initialTheme = checkIsDarkSchemePreferred() ? "dark" : "light";
-        document.documentElement.setAttribute("data-theme", initialTheme);
-        setTheme(initialTheme === "dark" ? "twilight" : "tomorrow");
 
         const updateTheme = () => {
           const theme = document.documentElement.getAttribute("data-theme");
@@ -28,11 +23,14 @@ export function useChangeTheme(){
 
 };
 export function ThemeToggle() {
-  const [isChecked, setIsChecked] = useState(false);
   const theme = useChangeTheme();
+  const isChecked = theme === "twilight";
   useEffect(() => {
-    setIsChecked(theme === "twilight");
-  }, [theme]);
+    const checkIsDarkSchemePreferred = () =>
+          window?.matchMedia?.('(prefers-color-scheme:dark)')?.matches ?? false;
+    const initialTheme = checkIsDarkSchemePreferred() ? "dark" : "light";
+    document.documentElement.setAttribute("data-theme", initialTheme);
+  }, []);
   
   return (
     <label className="flex cursor-pointer gap-2" style={{ marginLeft: "1em" }}>
@@ -56,7 +54,6 @@ export function ThemeToggle() {
       className="toggle theme-controller"
       onChange={(e) => {
         const isdark = e.target.checked;
-        setIsChecked(isdark);
         const theme = isdark ? "dark" : "light";
         document.documentElement.setAttribute("data-theme", theme);
       }}