feature: dashboard settings and invite activation flow consistency fixed. frontend warnings fixed

frontend/src/components/ui/common/ThemeToggle.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Moon, Sun } from 'lucide-react';
+import { applyTheme, getStoredTheme, type ThemeMode } from '@/lib/theme';
+
+export function ThemeToggle() {
+  const [mode, setMode] = useState<ThemeMode | null>(null);
+
+  useEffect(() => {
+    setMode(getStoredTheme());
+  }, []);
+
+  const handleClick = () => {
+    const current = getStoredTheme();
+    const next: ThemeMode = current === 'dark' ? 'light' : 'dark';
+    applyTheme(next);
+    setMode(next);
+  };
+
+  if (mode === null) {
+    return (
+      <span
+        className="inline-flex h-9 w-9 shrink-0 rounded-[var(--radius-md)] border border-border/60 bg-background-secondary/80"
+        aria-hidden
+      />
+    );
+  }
+
+  const isDark = mode === 'dark';
+
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+      className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-[var(--radius-md)] border border-border/60 bg-background-secondary/80 text-text-primary hover:border-border-strong hover:bg-background-card/80 transition-colors"
+      aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
+      title={isDark ? 'Light mode' : 'Dark mode'}
+    >
+      {isDark ? (
+        <Sun className="h-[18px] w-[18px] icon-flat" />
+      ) : (
+        <Moon className="h-[18px] w-[18px] icon-flat" />
+      )}
+    </button>
+  );
+}