Merge pull request #28497 from overleaf/mj-system-editor-theme-dark-light-split

[web] Split editor theme into two when using system overall theme

GitOrigin-RevId: 1efa5553fdff8a17de634017882feb2ede614cd6

services/web/frontend/js/shared/hooks/use-active-editor-theme.tsx

@@ -0,0 +1,20 @@
+import { useActiveOverallTheme } from './use-active-overall-theme'
+import { useUserSettingsContext } from '../context/user-settings-context'
+import { isIEEEBranded } from '@/utils/is-ieee-branded'
+
+export const useActiveEditorTheme = () => {
+  const activeOverallTheme = useActiveOverallTheme()
+  const {
+    userSettings: {
+      overallTheme,
+      editorTheme,
+      editorLightTheme,
+      editorDarkTheme,
+    },
+  } = useUserSettingsContext()
+  if (overallTheme !== 'system' || isIEEEBranded()) {
+    return editorTheme
+  } else {
+    return activeOverallTheme === 'dark' ? editorDarkTheme : editorLightTheme
+  }
+}

services/web/frontend/js/shared/hooks/use-active-overall-theme.tsx

@@ -6,13 +6,6 @@ import { useSplitTestContext } from '../context/split-test-context'
 
 export type ActiveOverallTheme = 'dark' | 'light'
 
-const mediaWatcher = window.matchMedia?.('(prefers-color-scheme: dark)') ?? {
-  // If matchMedia is not supported, use the default (dark) theme
-  matches: true,
-  addEventListener: () => {},
-  removeEventListener: () => {},
-}
-
 function getTheme(
   overallTheme: OverallTheme,
   prefersDark: boolean
@@ -33,8 +26,13 @@ export const useActiveOverallTheme = (
   featureFlag?: string
 ): ActiveOverallTheme => {
   const { splitTestVariants } = useSplitTestContext()
-  const [browserPrefersDarkMode, setBrowserPrefersDarkMode] = useState(
-    mediaWatcher.matches
+  const [browserPrefersDarkMode, setBrowserPrefersDarkMode] = useState(() =>
+    // If matchMedia is not supported, use the default (dark) theme
+    {
+      return (
+        window.matchMedia?.('(prefers-color-scheme: dark)')?.matches ?? true
+      )
+    }
   )
   const {
     userSettings: { overallTheme },
@@ -50,6 +48,9 @@ export const useActiveOverallTheme = (
   }, [overallTheme, browserPrefersDarkMode, featureFlag, splitTestVariants])
 
   useEffect(() => {
+    const mediaWatcher = window.matchMedia?.('(prefers-color-scheme: dark)')
+    if (!mediaWatcher) return
+
     const listener = (e: MediaQueryListEvent) => {
       setBrowserPrefersDarkMode(e.matches)
     }