updated look

components/layout/ThemeToggle.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+type Theme = "light" | "dark";
+
+const STORAGE_KEY = "theme-preference";
+
+function applyTheme(theme: Theme) {
+  document.documentElement.dataset.theme = theme;
+  window.localStorage.setItem(STORAGE_KEY, theme);
+}
+
+function getCurrentTheme(): Theme {
+  const currentTheme = document.documentElement.dataset.theme;
+  if (currentTheme === "light" || currentTheme === "dark") {
+    return currentTheme;
+  }
+
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+
+export function ThemeToggle() {
+  const toggleTheme = () => {
+    const nextTheme = getCurrentTheme() === "dark" ? "light" : "dark";
+    applyTheme(nextTheme);
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={toggleTheme}
+      title="Toggle color theme"
+      aria-label="Toggle color theme"
+      className="theme-toggle inline-flex h-8 w-8 items-center justify-center rounded-full border border-transparent text-muted-strong transition-colors hover:border-line hover:text-ink"
+    >
+      <span className="sr-only">Toggle color theme</span>
+      <svg
+        aria-hidden="true"
+        viewBox="0 0 24 24"
+        className="theme-toggle__sun h-3.5 w-3.5 fill-none stroke-current"
+        strokeWidth="1.7"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <circle cx="12" cy="12" r="4" />
+        <path d="M12 2.5v2.2" />
+        <path d="M12 19.3v2.2" />
+        <path d="m4.9 4.9 1.6 1.6" />
+        <path d="m17.5 17.5 1.6 1.6" />
+        <path d="M2.5 12h2.2" />
+        <path d="M19.3 12h2.2" />
+        <path d="m4.9 19.1 1.6-1.6" />
+        <path d="m17.5 6.5 1.6-1.6" />
+      </svg>
+      <svg
+        aria-hidden="true"
+        viewBox="0 0 24 24"
+        className="theme-toggle__moon h-3.5 w-3.5 fill-none stroke-current"
+        strokeWidth="1.7"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z" />
+      </svg>
+    </button>
+  );
+}