feat: add theme system from jarvis frontend

apps/web/src/components/layout/ThemeToggle.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { useTheme } from "@/providers/ThemeProvider";
+
+interface ThemeToggleProps {
+  className?: string;
+}
+
+export function ThemeToggle({ className = "" }: ThemeToggleProps) {
+  const { resolvedTheme, toggleTheme } = useTheme();
+
+  return (
+    <button
+      onClick={toggleTheme}
+      className={`btn-ghost rounded-md p-2 ${className}`}
+      title={`Switch to ${resolvedTheme === "dark" ? "light" : "dark"} mode`}
+      aria-label={`Switch to ${resolvedTheme === "dark" ? "light" : "dark"} mode`}
+    >
+      {resolvedTheme === "dark" ? (
+        // Sun icon for dark mode (click to switch to light)
+        <svg
+          className="h-5 w-5"
+          style={{ color: "rgb(var(--semantic-warning))" }}
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={1.5}
+        >
+          <circle cx="12" cy="12" r="4" />
+          <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" />
+        </svg>
+      ) : (
+        // Moon icon for light mode (click to switch to dark)
+        <svg
+          className="h-5 w-5"
+          style={{ color: "rgb(var(--text-secondary))" }}
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={1.5}
+        >
+          <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
+        </svg>
+      )}
+    </button>
+  );
+}