adding appearance toggle (light/dark mode)

components/ThemeToggle.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { useLayoutEffect, useState } from "react";
+
+const THEME_KEY = "novarix-theme";
+
+type Theme = "light" | "dark";
+
+function applyTheme(theme: Theme) {
+  document.documentElement.dataset.theme = theme;
+  document.documentElement.style.colorScheme = theme;
+}
+
+export default function ThemeToggle({
+  className = "",
+}: {
+  className?: string;
+}) {
+  const [theme, setTheme] = useState<Theme>("light");
+
+  useLayoutEffect(() => {
+    const current =
+      document.documentElement.dataset.theme === "dark" ? "dark" : "light";
+    setTheme(current);
+  }, []);
+
+  function toggleTheme() {
+    const nextTheme: Theme = theme === "dark" ? "light" : "dark";
+    setTheme(nextTheme);
+    applyTheme(nextTheme);
+
+    try {
+      window.localStorage.setItem(THEME_KEY, nextTheme);
+    } catch {
+      /* storage unavailable — silently ignore */
+    }
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={toggleTheme}
+      aria-label={`Switch to ${theme === "dark" ? "light" : "dark"} mode`}
+      title={`Switch to ${theme === "dark" ? "light" : "dark"} mode`}
+      className={`inline-flex items-center rounded-full border border-[var(--border-strong)] px-3 py-1.5 text-sm text-[var(--text)] transition-colors hover:border-[var(--accent)] hover:text-[var(--accent)] ${className}`.trim()}
+    >
+      {theme === "dark" ? "Light mode" : "Dark mode"}
+    </button>
+  );
+}