From 2b52345c66f00ff9b109e599d1862091e7c550da Mon Sep 17 00:00:00 2001
From: neodk2004 <barac.daniel@gmail.com>
Date: Thu, 13 Aug 2026 11:11:53 +0200
Subject: [PATCH] feat(landing): add guest-facing Dark Mode toggle to the
 navbar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Visitors without an account had no way to switch themes — the toggle so
far only existed in the authenticated Sidebar/MobileNav. This variant
skips the account-bound persistence (no Owner row for guests) and just
flips next-themes' own localStorage-backed state.
---
 src/app/page.tsx                             |  2 ++
 src/components/landing/ThemeToggleButton.tsx | 31 ++++++++++++++++++++
 2 files changed, 33 insertions(+)
 create mode 100644 src/components/landing/ThemeToggleButton.tsx

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 3875166..8a20ccd 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -6,6 +6,7 @@ import Image from "next/image";
 import { PawPrint, HeartPulse, MessageCircle, Images, Heart, Sparkles, CheckCircle2 } from "lucide-react";
 import { LanguageSwitcher } from "@/components/i18n/LanguageSwitcher";
 import { ScrollReveal } from "@/components/landing/ScrollReveal";
+import { ThemeToggleButton } from "@/components/landing/ThemeToggleButton";
 
 /**
  * Root route (/) — public landing page for logged-out visitors, redirects
@@ -72,6 +73,7 @@ export default async function RootPage() {
           </nav>
 
           <div className="flex items-center gap-3">
+            <ThemeToggleButton />
             <LanguageSwitcher />
             <Link
               href="/log-in"
diff --git a/src/components/landing/ThemeToggleButton.tsx b/src/components/landing/ThemeToggleButton.tsx
new file mode 100644
index 0000000..57f2115
--- /dev/null
+++ b/src/components/landing/ThemeToggleButton.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+import { useTranslations } from "next-intl";
+
+// Guest-facing variant for the public landing page — no Owner account exists
+// yet, so this only flips next-themes' own localStorage-backed state (same
+// mechanism the authenticated Sidebar toggle uses for same-browser persistence,
+// just without the account-bound write that useThemeToggle performs).
+export function ThemeToggleButton() {
+  const { resolvedTheme, setTheme } = useTheme();
+  const t = useTranslations("Theme");
+  const isDark = resolvedTheme === "dark";
+
+  return (
+    <button
+      type="button"
+      onClick={() => setTheme(isDark ? "light" : "dark")}
+      aria-label={t("toggleLabel")}
+      title={t("toggleLabel")}
+      className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+    >
+      {isDark ? (
+        <Sun className="h-4 w-4" aria-hidden="true" />
+      ) : (
+        <Moon className="h-4 w-4" aria-hidden="true" />
+      )}
+    </button>
+  );
+}