From c47de36b050dafd2ce269ad8934803b4aca043d2 Mon Sep 17 00:00:00 2001
From: Murilo Pires <50873657+MuriloFP@users.noreply.github.com>
Date: Wed, 23 Jul 2025 17:41:02 -0300
Subject: [PATCH] Fix/website logo theme persistence (#6040)

* feat: add Issue Fixer Orchestrator mode

* fix: persist logo theme state on page navigation and refresh

- Add mounted state to prevent hydration mismatch
- Use theme as fallback when resolvedTheme is not available
- Ensure logo matches the persisted theme on initial page load

Fixes issue where logo would revert to dark version after page refresh
even when light theme was selected
---
 .../src/lib/hooks/use-logo-src.ts             | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/apps/web-roo-code/src/lib/hooks/use-logo-src.ts b/apps/web-roo-code/src/lib/hooks/use-logo-src.ts
index 4f5631a18f..49304a602b 100644
--- a/apps/web-roo-code/src/lib/hooks/use-logo-src.ts
+++ b/apps/web-roo-code/src/lib/hooks/use-logo-src.ts
@@ -1,8 +1,24 @@
 "use client"
 
 import { useTheme } from "next-themes"
+import { useEffect, useState } from "react"
 
 export function useLogoSrc(): string {
-	const { resolvedTheme } = useTheme()
-	return resolvedTheme === "light" ? "/Roo-Code-Logo-Horiz-blk.svg" : "/Roo-Code-Logo-Horiz-white.svg"
+	const { resolvedTheme, theme } = useTheme()
+	const [mounted, setMounted] = useState(false)
+
+	// Avoid hydration mismatch by waiting for client-side mount
+	useEffect(() => {
+		setMounted(true)
+	}, [])
+
+	// Before mounting, return a default logo (dark theme as specified in providers)
+	// This prevents the logo from flickering on initial load
+	if (!mounted) {
+		return "/Roo-Code-Logo-Horiz-white.svg"
+	}
+
+	// Use theme as fallback if resolvedTheme is not available yet
+	const currentTheme = resolvedTheme || theme
+	return currentTheme === "light" ? "/Roo-Code-Logo-Horiz-blk.svg" : "/Roo-Code-Logo-Horiz-white.svg"
 }