ユーザ指定のテーマ・画面との連動

Tatsu723 · Tatsu723 · commit b73dabe3a147 · 2025-09-22T15:56:56.000+09:00
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 を使うとよさそう
