From 10005799fbe7008df67cbaede6e91ff36fad35c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gjermund=20H=C3=B8s=C3=B8ien=20Wiggen?=
 <gjermund.wiggen@sikt.no>
Date: Sun, 7 Jun 2026 22:34:26 +0200
Subject: [PATCH] feat: add theme-toggle component with next-themes sun/moon
 icons

---
 web/src/components/theme-toggle.tsx | 32 +++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 web/src/components/theme-toggle.tsx

diff --git a/web/src/components/theme-toggle.tsx b/web/src/components/theme-toggle.tsx
new file mode 100644
index 0000000..fff0780
--- /dev/null
+++ b/web/src/components/theme-toggle.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { SunIcon, MoonIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => setMounted(true), []);
+
+  if (!mounted) {
+    return <div className="w-8 h-8" />;
+  }
+
+  const isDark = theme === "dark";
+
+  return (
+    <button
+      onClick={() => setTheme(isDark ? "light" : "dark")}
+      className="w-8 h-8 flex items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-accent transition-all duration-150"
+      aria-label="Toggle theme"
+    >
+      {isDark ? (
+        <SunIcon className="w-4 h-4" />
+      ) : (
+        <MoonIcon className="w-4 h-4" />
+      )}
+    </button>
+  );
+}