Rewrite class-based theme provider and toggle.

next-themes still defaults to dark with no system follow. Clerk theme wrapper stays inherited.

periscope/src/frontend/src/components/theme/theme-provider.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { ThemeProvider as NextThemes } from "next-themes";
+
+/** Class-based color scheme. Default is dark; OS preference is ignored. */
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  return (
+    <NextThemes
+      attribute="class"
+      defaultTheme="dark"
+      enableSystem={false}
+      disableTransitionOnChange
+    >
+      {children}
+    </NextThemes>
+  );
+}

periscope/src/frontend/src/components/theme/theme-toggle.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+import { cn } from "@/lib/utils";
+
+export function ThemeToggle({ className }: { className?: string }) {
+  const { resolvedTheme, setTheme } = useTheme();
+
+  const flip = () => {
+    setTheme(resolvedTheme === "dark" ? "light" : "dark");
+  };
+
+  return (
+    <button
+      type="button"
+      aria-label="Toggle theme"
+      onClick={flip}
+      className={cn(
+        "inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors",
+        className,
+      )}
+    >
+      <Sun className="hidden h-4 w-4 dark:block" />
+      <Moon className="h-4 w-4 dark:hidden" />
+    </button>
+  );
+}