From fd96baaf05f88b68644e4be97b512004c8020cd4 Mon Sep 17 00:00:00 2001
From: David <33458145+davidmcpowell@users.noreply.github.com>
Date: Wed, 5 Nov 2025 13:41:19 +0000
Subject: [PATCH] Merge pull request #29536 from overleaf/dp-fix-logo

Fix overleaf logo color on ds nav

GitOrigin-RevId: c48ed09339aa1af03bdbad29e76d8cdb74260f0c
---
 .../project-list/components/project-list-ds-nav.tsx |  2 +-
 .../js/shared/hooks/use-active-overall-theme.tsx    | 13 +++++++++++--
 .../frontend/js/shared/hooks/use-themed-page.tsx    | 10 +---------
 3 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/services/web/frontend/js/features/project-list/components/project-list-ds-nav.tsx b/services/web/frontend/js/features/project-list/components/project-list-ds-nav.tsx
index bab7c25c47..67eda26490 100644
--- a/services/web/frontend/js/features/project-list/components/project-list-ds-nav.tsx
+++ b/services/web/frontend/js/features/project-list/components/project-list-ds-nav.tsx
@@ -37,7 +37,7 @@ export function ProjectListDsNav() {
     tags,
     selectedTagId,
   } = useProjectListContext()
-  const activeOverallTheme = useActiveOverallTheme()
+  const activeOverallTheme = useActiveOverallTheme('themed-project-dashboard')
 
   const selectedTag = tags.find(tag => tag._id === selectedTagId)
 
diff --git a/services/web/frontend/js/shared/hooks/use-active-overall-theme.tsx b/services/web/frontend/js/shared/hooks/use-active-overall-theme.tsx
index 388c78cf38..2a7b391c83 100644
--- a/services/web/frontend/js/shared/hooks/use-active-overall-theme.tsx
+++ b/services/web/frontend/js/shared/hooks/use-active-overall-theme.tsx
@@ -2,6 +2,7 @@ import { useUserSettingsContext } from '@/shared/context/user-settings-context'
 import { OverallTheme } from '@/shared/utils/styles'
 import { isIEEEBranded } from '@/utils/is-ieee-branded'
 import { useEffect, useMemo, useState } from 'react'
+import { useSplitTestContext } from '../context/split-test-context'
 
 export type ActiveOverallTheme = 'dark' | 'light'
 
@@ -28,7 +29,10 @@ function getTheme(
   return 'dark'
 }
 
-export const useActiveOverallTheme = (): ActiveOverallTheme => {
+export const useActiveOverallTheme = (
+  featureFlag?: string
+): ActiveOverallTheme => {
+  const { splitTestVariants } = useSplitTestContext()
   const [browserPrefersDarkMode, setBrowserPrefersDarkMode] = useState(
     mediaWatcher.matches
   )
@@ -37,8 +41,13 @@ export const useActiveOverallTheme = (): ActiveOverallTheme => {
   } = useUserSettingsContext()
 
   const activeOverallTheme = useMemo<ActiveOverallTheme>(() => {
+    // Override theme if feature flag is provided and not enabled
+    if (featureFlag && splitTestVariants[featureFlag] !== 'enabled') {
+      return 'light'
+    }
+
     return getTheme(overallTheme, browserPrefersDarkMode)
-  }, [overallTheme, browserPrefersDarkMode])
+  }, [overallTheme, browserPrefersDarkMode, featureFlag, splitTestVariants])
 
   useEffect(() => {
     const listener = (e: MediaQueryListEvent) => {
diff --git a/services/web/frontend/js/shared/hooks/use-themed-page.tsx b/services/web/frontend/js/shared/hooks/use-themed-page.tsx
index bbebb95d92..64e4f7b7d0 100644
--- a/services/web/frontend/js/shared/hooks/use-themed-page.tsx
+++ b/services/web/frontend/js/shared/hooks/use-themed-page.tsx
@@ -1,16 +1,8 @@
 import { useEffect } from 'react'
 import { useActiveOverallTheme } from './use-active-overall-theme'
-import { useSplitTestContext } from '../context/split-test-context'
 
 export default function useThemedPage(featureFlag?: string) {
-  const { splitTestVariants } = useSplitTestContext()
-
-  let activeOverallTheme = useActiveOverallTheme()
-
-  // Override theme if feature flag is provided and not enabled
-  if (featureFlag && splitTestVariants[featureFlag] !== 'enabled') {
-    activeOverallTheme = 'light'
-  }
+  const activeOverallTheme = useActiveOverallTheme(featureFlag)
 
   useEffect(() => {
     // Sets the body's data-theme attribute for theming