From 84b10011b91c6a6af07fa3799fb89553080f9f0d Mon Sep 17 00:00:00 2001 From: Nife-tanny Date: Mon, 31 Aug 2026 09:56:14 +0100 Subject: [PATCH] fix: consolidate theme state on next-themes useTheme() MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Remove duplicate theme management from useSettings.ts and settings-content.tsx, both of which independently read/wrote the "flowfi-theme" localStorage key and manually toggled the dark class on without coordinating with each other or with next-themes' ThemeProvider. This caused toggling theme in one surface (e.g. the settings page) to not reflect in another (e.g. ModeToggle in the navbar) until a page reload. All three theme surfaces now use next-themes' useTheme() as the single source of truth: - layout.tsx's ThemeProvider (unchanged — already the provider) - settings-content.tsx now calls useTheme() from next-themes instead of managing its own localStorage read/write and class toggling - useSettings.ts no longer manages theme at all; consumers needing theme use useTheme() from next-themes instead Non-theme settings (displayCurrency, amountFormat, decimalPlaces) and their utilities (formatAmountWithPreference, getDecimalPlaces, etc.) are preserved untouched. Closes #1262 🤖 Generated with Codebuff Co-Authored-By: Codebuff --- .../src/app/settings/settings-content.tsx | 34 ++------------ frontend/src/hooks/useSettings.test.ts | 25 ++-------- frontend/src/hooks/useSettings.ts | 46 ++----------------- 3 files changed, 14 insertions(+), 91 deletions(-) diff --git a/frontend/src/app/settings/settings-content.tsx b/frontend/src/app/settings/settings-content.tsx index f510f1ba..7222acc5 100644 --- a/frontend/src/app/settings/settings-content.tsx +++ b/frontend/src/app/settings/settings-content.tsx @@ -1,6 +1,7 @@ "use client"; import { useState, useEffect } from "react"; +import { useTheme } from "next-themes"; import { Copy, Check, LogOut, Moon, Sun, Bell, Globe } from "lucide-react"; import { STELLAR_NETWORK, shortenPublicKey } from "@/lib/wallet"; import { useWallet } from "@/context/wallet-context"; @@ -24,20 +25,7 @@ export default function SettingsContent() { const { session, disconnect, isHydrated } = useWallet(); const [browserPush, setBrowserPush] = useState(false); - const [theme, setTheme] = useState<"light" | "dark" | "system">(() => { - if (typeof window !== "undefined") { - const saved = localStorage.getItem("flowfi-theme") as - | "light" - | "dark" - | "system" - | null; - if (saved) { - document.documentElement.classList.toggle("dark", saved === "dark"); - return saved; - } - } - return "dark"; - }); + const { theme, setTheme } = useTheme(); const [displayCurrency, setDisplayCurrency] = useState(() => { if (typeof window !== "undefined") { @@ -66,17 +54,6 @@ export default function SettingsContent() { const [copied, setCopied] = useState(false); const [showDisconnectConfirm, setShowDisconnectConfirm] = useState(false); - const toggleTheme = (newTheme: "light" | "dark" | "system") => { - setTheme(newTheme); - localStorage.setItem("flowfi-theme", newTheme); - if (newTheme === "system") { - const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches; - document.documentElement.classList.toggle("dark", prefersDark); - } else { - document.documentElement.classList.toggle("dark", newTheme === "dark"); - } - }; - const copyAddress = async () => { if (session?.publicKey) { await navigator.clipboard.writeText(session.publicKey); @@ -209,13 +186,12 @@ export default function SettingsContent() { -
- {(["light", "dark", "system"] as const).map((t) => ( +
{(["light", "dark", "system"] as const).map((t) => (