feat(landing): add guest-facing Dark Mode toggle to the navbar

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.
This commit is contained in:
admin committed 2026-08-13 11:11:53 +02:00
1 parent d21f4708dc
commit 2b52345c66
2 files changed
+33

No files matched your search

+2
View File
@@ -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"
@@ -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>
);
}