Merge pull request #29152 from overleaf/dp-dashboard-dark-mode

Add data-theme attribute to project list page

GitOrigin-RevId: 3a623e3258d55e01f0911bcc45b78bcdba21745b

services/web/frontend/js/shared/context/ide-context.tsx

@@ -2,6 +2,10 @@ import { createContext, FC, useContext, useEffect, useMemo } from 'react'
 import { ScopeValueStore } from '../../../../types/ide/scope-value-store'
 import { ScopeEventEmitter } from '../../../../types/ide/scope-event-emitter'
 import { Socket } from '@/features/ide-react/connection/types/socket'
+import { useUserSettingsContext } from './user-settings-context'
+import { userStyles } from '../utils/styles'
+import { canUseNewEditor } from '@/features/ide-redesign/utils/new-editor-utils'
+import { useActiveOverallTheme } from '../hooks/use-active-overall-theme'
 
 export type Ide = {
   socket: Socket
@@ -44,6 +48,21 @@ export const IdeProvider: FC<
     }
   }, [unstableStore])
 
+  const { userSettings } = useUserSettingsContext()
+  const activeOverallTheme = useActiveOverallTheme()
+
+  useEffect(() => {
+    const { fontFamily, lineHeight } = userStyles(userSettings)
+    unstableStore.set('settings', {
+      overallTheme: activeOverallTheme,
+      keybindings: userSettings.mode === 'none' ? 'default' : userSettings.mode,
+      fontFamily,
+      lineHeight,
+      fontSize: userSettings.fontSize,
+      isNewEditor: canUseNewEditor() && userSettings.enableNewEditor,
+    })
+  }, [unstableStore, userSettings, activeOverallTheme])
+
   const value = useMemo<IdeContextValue>(() => {
     return {
       ...ide,

services/web/frontend/js/shared/context/user-settings-context.tsx

@@ -6,14 +6,9 @@ import {
   SetStateAction,
   FC,
   useState,
-  useEffect,
 } from 'react'
-
 import { UserSettings } from '../../../../types/user-settings'
 import getMeta from '@/utils/meta'
-import { userStyles } from '../utils/styles'
-import { canUseNewEditor } from '@/features/ide-redesign/utils/new-editor-utils'
-import { useIdeContext } from '@/shared/context/ide-context'
 
 const defaultSettings: UserSettings = {
   pdfViewer: 'pdfjs',
@@ -50,20 +45,6 @@ export const UserSettingsProvider: FC<React.PropsWithChildren> = ({
     () => getMeta('ol-userSettings') || defaultSettings
   )
 
-  // update the global scope 'settings' value, for extensions
-  const { unstableStore } = useIdeContext()
-  useEffect(() => {
-    const { fontFamily, lineHeight } = userStyles(userSettings)
-    unstableStore.set('settings', {
-      overallTheme: userSettings.overallTheme === 'light-' ? 'light' : 'dark',
-      keybindings: userSettings.mode === 'none' ? 'default' : userSettings.mode,
-      fontFamily,
-      lineHeight,
-      fontSize: userSettings.fontSize,
-      isNewEditor: canUseNewEditor() && userSettings.enableNewEditor,
-    })
-  }, [unstableStore, userSettings])
-
   const value = useMemo<UserSettingsContextValue>(
     () => ({
       userSettings,

services/web/frontend/js/shared/hooks/use-themed-page.tsx

@@ -0,0 +1,20 @@
+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'
+  }
+
+  useEffect(() => {
+    // Sets the body's data-theme attribute for theming
+    document.body.dataset.theme =
+      activeOverallTheme === 'dark' ? 'default' : 'light'
+  }, [activeOverallTheme])
+}