From 7c1a225be4e1a3dfd639efd0ef0d2dab31f4fe32 Mon Sep 17 00:00:00 2001
From: Mathias Jakobsen <mathias.jakobsen@overleaf.com>
Date: Thu, 27 Nov 2025 09:05:29 +0000
Subject: [PATCH] Merge pull request #29899 from
 overleaf/mj-dark-mode-file-flash

[web] Avoid background color flash when switching files

GitOrigin-RevId: e5d2fbb631fd54d195b9cb51b2a9db584d205138
---
 .../Features/Project/ProjectController.mjs    | 80 +++++++++----------
 .../settings/settings-editor-theme.tsx        |  8 +-
 .../components/editor/editor-loading-pane.tsx | 25 ++++++
 .../components/editor/editor-pane.tsx         |  4 +-
 .../components/editor/loading-pane.tsx        | 10 ---
 .../ide-redesign/components/editor.tsx        |  4 +-
 .../editor-theme-setting.tsx                  |  8 +-
 .../source-editor/extensions/theme.ts         |  3 +-
 services/web/frontend/js/utils/meta.ts        |  4 +-
 .../stylesheets/pages/editor/file-view.scss   |  5 ++
 .../stylesheets/pages/editor/ide.scss         | 11 +++
 .../editor-left-menu.spec.tsx                 | 12 ++-
 .../settings/settings-editor-theme.test.tsx   | 20 +++--
 .../settings-modal/settings-modal.test.tsx    | 12 ++-
 .../settings/editor-theme-setting.test.tsx    | 24 ++++--
 15 files changed, 145 insertions(+), 85 deletions(-)
 create mode 100644 services/web/frontend/js/features/ide-react/components/editor/editor-loading-pane.tsx
 delete mode 100644 services/web/frontend/js/features/ide-react/components/editor/loading-pane.tsx

diff --git a/services/web/app/src/Features/Project/ProjectController.mjs b/services/web/app/src/Features/Project/ProjectController.mjs
index 6e7ec28b2b..064ebff3a3 100644
--- a/services/web/app/src/Features/Project/ProjectController.mjs
+++ b/services/web/app/src/Features/Project/ProjectController.mjs
@@ -1308,49 +1308,49 @@ const defaultUserValues = () => ({
 })
 
 const THEME_LIST = [
-  'cobalt',
-  'dracula',
-  'eclipse',
-  'monokai',
-  'overleaf',
-  'overleaf_dark',
-  'textmate',
+  { name: 'cobalt', dark: true },
+  { name: 'dracula', dark: true },
+  { name: 'eclipse', dark: false },
+  { name: 'monokai', dark: true },
+  { name: 'overleaf', dark: false },
+  { name: 'overleaf_dark', dark: true },
+  { name: 'textmate', dark: false },
 ]
 
 const LEGACY_THEME_LIST = [
-  'ambiance',
-  'chaos',
-  'chrome',
-  'clouds',
-  'clouds_midnight',
-  'crimson_editor',
-  'dawn',
-  'dreamweaver',
-  'github',
-  'gob',
-  'gruvbox',
-  'idle_fingers',
-  'iplastic',
-  'katzenmilch',
-  'kr_theme',
-  'kuroir',
-  'merbivore',
-  'merbivore_soft',
-  'mono_industrial',
-  'nord_dark',
-  'pastel_on_dark',
-  'solarized_dark',
-  'solarized_light',
-  'sqlserver',
-  'terminal',
-  'tomorrow',
-  'tomorrow_night',
-  'tomorrow_night_blue',
-  'tomorrow_night_bright',
-  'tomorrow_night_eighties',
-  'twilight',
-  'vibrant_ink',
-  'xcode',
+  { name: 'ambiance', dark: true },
+  { name: 'chaos', dark: true },
+  { name: 'chrome', dark: false },
+  { name: 'clouds', dark: false },
+  { name: 'clouds_midnight', dark: true },
+  { name: 'crimson_editor', dark: false },
+  { name: 'dawn', dark: false },
+  { name: 'dreamweaver', dark: false },
+  { name: 'github', dark: false },
+  { name: 'gob', dark: true },
+  { name: 'gruvbox', dark: true },
+  { name: 'idle_fingers', dark: true },
+  { name: 'iplastic', dark: false },
+  { name: 'katzenmilch', dark: false },
+  { name: 'kr_theme', dark: true },
+  { name: 'kuroir', dark: false },
+  { name: 'merbivore', dark: true },
+  { name: 'merbivore_soft', dark: true },
+  { name: 'mono_industrial', dark: true },
+  { name: 'nord_dark', dark: true },
+  { name: 'pastel_on_dark', dark: true },
+  { name: 'solarized_dark', dark: true },
+  { name: 'solarized_light', dark: false },
+  { name: 'sqlserver', dark: false },
+  { name: 'terminal', dark: true },
+  { name: 'tomorrow', dark: false },
+  { name: 'tomorrow_night', dark: true },
+  { name: 'tomorrow_night_blue', dark: true },
+  { name: 'tomorrow_night_bright', dark: true },
+  { name: 'tomorrow_night_eighties', dark: true },
+  { name: 'twilight', dark: true },
+  { name: 'vibrant_ink', dark: true },
+  { name: 'xcode', dark: false },
 ]
 
 const ProjectController = {
diff --git a/services/web/frontend/js/features/editor-left-menu/components/settings/settings-editor-theme.tsx b/services/web/frontend/js/features/editor-left-menu/components/settings/settings-editor-theme.tsx
index 870ce48ca1..e8c50c86a6 100644
--- a/services/web/frontend/js/features/editor-left-menu/components/settings/settings-editor-theme.tsx
+++ b/services/web/frontend/js/features/editor-left-menu/components/settings/settings-editor-theme.tsx
@@ -14,8 +14,8 @@ export default function SettingsEditorTheme() {
   const options = useMemo(() => {
     const editorThemeOptions: Array<Option> =
       editorThemes?.map(theme => ({
-        value: theme,
-        label: theme.replace(/_/g, ' '),
+        value: theme.name,
+        label: theme.name.replace(/_/g, ' '),
       })) ?? []
 
     const dividerOption: Option = {
@@ -26,8 +26,8 @@ export default function SettingsEditorTheme() {
 
     const legacyEditorThemeOptions: Array<Option> =
       legacyEditorThemes?.map(theme => ({
-        value: theme,
-        label: theme.replace(/_/g, ' ') + ' (Legacy)',
+        value: theme.name,
+        label: theme.name.replace(/_/g, ' ') + ' (Legacy)',
       })) ?? []
 
     return [...editorThemeOptions, dividerOption, ...legacyEditorThemeOptions]
diff --git a/services/web/frontend/js/features/ide-react/components/editor/editor-loading-pane.tsx b/services/web/frontend/js/features/ide-react/components/editor/editor-loading-pane.tsx
new file mode 100644
index 0000000000..89ac77087a
--- /dev/null
+++ b/services/web/frontend/js/features/ide-react/components/editor/editor-loading-pane.tsx
@@ -0,0 +1,25 @@
+import { FC, useMemo } from 'react'
+import LoadingSpinner from '@/shared/components/loading-spinner'
+import { useProjectSettingsContext } from '@/features/editor-left-menu/context/project-settings-context'
+import getMeta from '@/utils/meta'
+import classNames from 'classnames'
+
+export const EditorLoadingPane: FC = () => {
+  const { editorTheme } = useProjectSettingsContext()
+  const isDark = useMemo(() => {
+    const themes = getMeta('ol-editorThemes') || []
+    const legacyThemes = getMeta('ol-legacyEditorThemes') || []
+    const selectedTheme =
+      themes.find(theme => theme.name === editorTheme) ||
+      legacyThemes.find(theme => theme.name === editorTheme)
+    return selectedTheme?.dark ?? false
+  }, [editorTheme])
+
+  return (
+    <div
+      className={classNames('loading-panel', { 'loading-panel-dark': isDark })}
+    >
+      <LoadingSpinner />
+    </div>
+  )
+}
diff --git a/services/web/frontend/js/features/ide-react/components/editor/editor-pane.tsx b/services/web/frontend/js/features/ide-react/components/editor/editor-pane.tsx
index b93a18db9f..dc119d0c5a 100644
--- a/services/web/frontend/js/features/ide-react/components/editor/editor-pane.tsx
+++ b/services/web/frontend/js/features/ide-react/components/editor/editor-pane.tsx
@@ -4,7 +4,7 @@ import SourceEditor from '@/features/source-editor/components/source-editor'
 import { useEditorManagerContext } from '@/features/ide-react/context/editor-manager-context'
 import { useEditorOpenDocContext } from '@/features/ide-react/context/editor-open-doc-context'
 import classNames from 'classnames'
-import { LoadingPane } from '@/features/ide-react/components/editor/loading-pane'
+import { EditorLoadingPane } from '@/features/ide-react/components/editor/editor-loading-pane'
 import { FullSizeLoadingSpinner } from '@/shared/components/loading-spinner'
 import { VerticalResizeHandle } from '@/features/ide-react/components/resize/vertical-resize-handle'
 import { useFileTreeOpenContext } from '@/features/ide-react/context/file-tree-open-context'
@@ -37,7 +37,7 @@ export const EditorPane: FC = () => {
           className="ide-react-editor-panel"
         >
           <SourceEditor />
-          {isLoading && <LoadingPane />}
+          {isLoading && <EditorLoadingPane />}
         </Panel>
 
         {showSymbolPalette && (
diff --git a/services/web/frontend/js/features/ide-react/components/editor/loading-pane.tsx b/services/web/frontend/js/features/ide-react/components/editor/loading-pane.tsx
deleted file mode 100644
index a553368ad6..0000000000
--- a/services/web/frontend/js/features/ide-react/components/editor/loading-pane.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { FC } from 'react'
-import LoadingSpinner from '@/shared/components/loading-spinner'
-
-export const LoadingPane: FC = () => {
-  return (
-    <div className="loading-panel">
-      <LoadingSpinner />
-    </div>
-  )
-}
diff --git a/services/web/frontend/js/features/ide-redesign/components/editor.tsx b/services/web/frontend/js/features/ide-redesign/components/editor.tsx
index 785ba1fb99..9b5e83cbbb 100644
--- a/services/web/frontend/js/features/ide-redesign/components/editor.tsx
+++ b/services/web/frontend/js/features/ide-redesign/components/editor.tsx
@@ -1,4 +1,4 @@
-import { LoadingPane } from '@/features/ide-react/components/editor/loading-pane'
+import { EditorLoadingPane } from '@/features/ide-react/components/editor/editor-loading-pane'
 import { useEditorOpenDocContext } from '@/features/ide-react/context/editor-open-doc-context'
 import { useFileTreeOpenContext } from '@/features/ide-react/context/file-tree-open-context'
 import classNames from 'classnames'
@@ -40,7 +40,7 @@ export const Editor = () => {
           className="ide-redesign-editor-panel"
         >
           <SourceEditor />
-          {isLoading && <LoadingPane />}
+          {isLoading && <EditorLoadingPane />}
         </Panel>
         {showSymbolPalette && (
           <>
diff --git a/services/web/frontend/js/features/ide-redesign/components/settings/appearance-settings/editor-theme-setting.tsx b/services/web/frontend/js/features/ide-redesign/components/settings/appearance-settings/editor-theme-setting.tsx
index 1a1a3f1c1e..55b95ac1d4 100644
--- a/services/web/frontend/js/features/ide-redesign/components/settings/appearance-settings/editor-theme-setting.tsx
+++ b/services/web/frontend/js/features/ide-redesign/components/settings/appearance-settings/editor-theme-setting.tsx
@@ -14,8 +14,8 @@ export default function EditorThemeSetting() {
   const options = useMemo(() => {
     const editorThemeOptions: Array<Option> =
       editorThemes?.map(theme => ({
-        value: theme,
-        label: theme.replace(/_/g, ' '),
+        value: theme.name,
+        label: theme.name.replace(/_/g, ' '),
       })) ?? []
 
     const dividerOption: Option = {
@@ -26,8 +26,8 @@ export default function EditorThemeSetting() {
 
     const legacyEditorThemeOptions: Array<Option> =
       legacyEditorThemes?.map(theme => ({
-        value: theme,
-        label: theme.replace(/_/g, ' ') + ' (Legacy)',
+        value: theme.name,
+        label: theme.name.replace(/_/g, ' ') + ' (Legacy)',
       })) ?? []
 
     return [...editorThemeOptions, dividerOption, ...legacyEditorThemeOptions]
diff --git a/services/web/frontend/js/features/source-editor/extensions/theme.ts b/services/web/frontend/js/features/source-editor/extensions/theme.ts
index fb82a45644..3a36a89c2f 100644
--- a/services/web/frontend/js/features/source-editor/extensions/theme.ts
+++ b/services/web/frontend/js/features/source-editor/extensions/theme.ts
@@ -287,7 +287,8 @@ const loadSelectedTheme = async (editorTheme: string) => {
     const themes = getMeta('ol-editorThemes') || []
     const legacyThemes = getMeta('ol-legacyEditorThemes') || []
     const themeExists =
-      themes.includes(editorTheme) || legacyThemes.includes(editorTheme)
+      themes.some(theme => theme.name === editorTheme) ||
+      legacyThemes.some(theme => theme.name === editorTheme)
     if (!themeExists) {
       editorTheme = 'textmate' // fallback to default if the theme is not found
     }
diff --git a/services/web/frontend/js/utils/meta.ts b/services/web/frontend/js/utils/meta.ts
index f1ad9523a1..404d614bdc 100644
--- a/services/web/frontend/js/utils/meta.ts
+++ b/services/web/frontend/js/utils/meta.ts
@@ -117,7 +117,7 @@ export interface Meta {
   'ol-domainCaptureEnabled': boolean | undefined
   'ol-domainCaptureTestURL': string | undefined
   'ol-dropbox': { error: boolean; registered: boolean }
-  'ol-editorThemes': string[]
+  'ol-editorThemes': { name: string; dark: boolean }[]
   'ol-email': string
   'ol-emailAddressLimit': number
   'ol-error': { name: string } | undefined
@@ -188,7 +188,7 @@ export interface Meta {
   'ol-labsExperiments': ActiveExperiment[] | undefined
   'ol-languages': SpellCheckLanguage[]
   'ol-learnedWords': string[]
-  'ol-legacyEditorThemes': string[]
+  'ol-legacyEditorThemes': { name: string; dark: boolean }[]
   'ol-licenseQuantity'?: number
   'ol-loadingText': string
   'ol-managedGroupSubscriptions': ManagedGroupSubscription[]
diff --git a/services/web/frontend/stylesheets/pages/editor/file-view.scss b/services/web/frontend/stylesheets/pages/editor/file-view.scss
index 511de4d114..f70ed72a04 100644
--- a/services/web/frontend/stylesheets/pages/editor/file-view.scss
+++ b/services/web/frontend/stylesheets/pages/editor/file-view.scss
@@ -7,6 +7,11 @@
   .file-view .no-preview {
     color: var(--content-secondary-themed);
   }
+
+  .file-view .loading-panel {
+    color: var(--content-secondary-themed);
+    background: var(--bg-primary-themed);
+  }
 }
 
 .file-view {
diff --git a/services/web/frontend/stylesheets/pages/editor/ide.scss b/services/web/frontend/stylesheets/pages/editor/ide.scss
index a047aa27cf..cfde6e3315 100644
--- a/services/web/frontend/stylesheets/pages/editor/ide.scss
+++ b/services/web/frontend/stylesheets/pages/editor/ide.scss
@@ -77,6 +77,17 @@ $editor-toggler-bg-dark-color: color.adjust(
       background-color: var(--bg-tertiary-themed);
     }
   }
+
+  .loading-panel {
+    background-color: var(--bg-light-primary);
+    color: var(--content-primary);
+
+    // Based on editor theme rather than overall theme
+    &.loading-panel-dark {
+      background-color: var(--bg-dark-primary);
+      color: var(--content-primary-dark);
+    }
+  }
 }
 
 .global-alerts {
diff --git a/services/web/test/frontend/components/editor-left-menu/editor-left-menu.spec.tsx b/services/web/test/frontend/components/editor-left-menu/editor-left-menu.spec.tsx
index a33cb38b42..c75e10874e 100644
--- a/services/web/test/frontend/components/editor-left-menu/editor-left-menu.spec.tsx
+++ b/services/web/test/frontend/components/editor-left-menu/editor-left-menu.spec.tsx
@@ -571,12 +571,16 @@ describe('<EditorLeftMenu />', function () {
       })
 
       it('shows editor theme menu correctly', function () {
-        const editorThemes = ['editortheme-1', 'editortheme-2', 'editortheme-3']
+        const editorThemes = [
+          { name: 'editortheme-1', dark: false },
+          { name: 'editortheme-2', dark: false },
+          { name: 'editortheme-3', dark: false },
+        ]
 
         const legacyEditorThemes = [
-          'legacytheme-1',
-          'legacytheme-2',
-          'legacytheme-3',
+          { name: 'legacytheme-1', dark: false },
+          { name: 'legacytheme-2', dark: false },
+          { name: 'legacytheme-3', dark: false },
         ]
 
         window.metaAttributesCache.set('ol-editorThemes', editorThemes)
diff --git a/services/web/test/frontend/features/editor-left-menu/components/settings/settings-editor-theme.test.tsx b/services/web/test/frontend/features/editor-left-menu/components/settings/settings-editor-theme.test.tsx
index f7b716e984..2f7fc14001 100644
--- a/services/web/test/frontend/features/editor-left-menu/components/settings/settings-editor-theme.test.tsx
+++ b/services/web/test/frontend/features/editor-left-menu/components/settings/settings-editor-theme.test.tsx
@@ -6,9 +6,17 @@ import { EditorLeftMenuProvider } from '@/features/editor-left-menu/components/e
 import { EditorProviders } from '../../../../helpers/editor-providers'
 
 describe('<SettingsEditorTheme />', function () {
-  const editorThemes = ['editortheme-1', 'editortheme-2', 'editortheme-3']
+  const editorThemes = [
+    { name: 'editortheme-1', dark: false },
+    { name: 'editortheme-2', dark: false },
+    { name: 'editortheme-3', dark: false },
+  ]
 
-  const legacyEditorThemes = ['legacytheme-1', 'legacytheme-2', 'legacytheme-3']
+  const legacyEditorThemes = [
+    { name: 'legacytheme-1', dark: false },
+    { name: 'legacytheme-2', dark: false },
+    { name: 'legacytheme-3', dark: false },
+  ]
 
   beforeEach(function () {
     window.metaAttributesCache.set('ol-editorThemes', editorThemes)
@@ -31,15 +39,15 @@ describe('<SettingsEditorTheme />', function () {
     const select = screen.getByLabelText('Editor theme')
 
     for (const theme of editorThemes) {
-      const option = within(select).getByText(theme.replace(/_/g, ' '))
-      expect(option.getAttribute('value')).to.equal(theme)
+      const option = within(select).getByText(theme.name.replace(/_/g, ' '))
+      expect(option.getAttribute('value')).to.equal(theme.name)
     }
 
     for (const theme of legacyEditorThemes) {
       const option = within(select).getByText(
-        theme.replace(/_/g, ' ') + ' (Legacy)'
+        theme.name.replace(/_/g, ' ') + ' (Legacy)'
       )
-      expect(option.getAttribute('value')).to.equal(theme)
+      expect(option.getAttribute('value')).to.equal(theme.name)
     }
   })
 })
diff --git a/services/web/test/frontend/features/settings-modal/settings-modal.test.tsx b/services/web/test/frontend/features/settings-modal/settings-modal.test.tsx
index b28f19bbb6..7ea8bdb3b3 100644
--- a/services/web/test/frontend/features/settings-modal/settings-modal.test.tsx
+++ b/services/web/test/frontend/features/settings-modal/settings-modal.test.tsx
@@ -60,8 +60,16 @@ describe('<SettingsModal />', function () {
     },
   ]
 
-  const editorThemes = ['editortheme-1', 'editortheme-2', 'editortheme-3']
-  const legacyEditorThemes = ['legacytheme-1', 'legacytheme-2', 'legacytheme-3']
+  const editorThemes = [
+    { name: 'editortheme-1', dark: false },
+    { name: 'editortheme-2', dark: false },
+    { name: 'editortheme-3', dark: false },
+  ]
+  const legacyEditorThemes = [
+    { name: 'legacytheme-1', dark: false },
+    { name: 'legacytheme-2', dark: false },
+    { name: 'legacytheme-3', dark: false },
+  ]
 
   const imageNames: ImageName[] = [
     {
diff --git a/services/web/test/frontend/features/settings-modal/settings/editor-theme-setting.test.tsx b/services/web/test/frontend/features/settings-modal/settings/editor-theme-setting.test.tsx
index 7751309634..aceb26f264 100644
--- a/services/web/test/frontend/features/settings-modal/settings/editor-theme-setting.test.tsx
+++ b/services/web/test/frontend/features/settings-modal/settings/editor-theme-setting.test.tsx
@@ -7,8 +7,16 @@ import EditorThemeSetting from '@/features/ide-redesign/components/settings/appe
 import userEvent from '@testing-library/user-event'
 
 describe('<EditorThemeSetting />', function () {
-  const editorThemes = ['editortheme-1', 'editortheme-2', 'editortheme-3']
-  const legacyEditorThemes = ['legacytheme-1', 'legacytheme-2', 'legacytheme-3']
+  const editorThemes = [
+    { name: 'editortheme-1', dark: false },
+    { name: 'editortheme-2', dark: false },
+    { name: 'editortheme-3', dark: false },
+  ]
+  const legacyEditorThemes = [
+    { name: 'legacytheme-1', dark: false },
+    { name: 'legacytheme-2', dark: false },
+    { name: 'legacytheme-3', dark: false },
+  ]
 
   beforeEach(function () {
     window.metaAttributesCache.set('ol-editorThemes', editorThemes)
@@ -39,25 +47,25 @@ describe('<EditorThemeSetting />', function () {
     const select = screen.getByLabelText('Editor theme')
 
     for (const theme of editorThemes) {
-      const option = within(select).getByText(theme.replace(/_/g, ' '))
-      expect(option.getAttribute('value')).to.equal(theme)
+      const option = within(select).getByText(theme.name.replace(/_/g, ' '))
+      expect(option.getAttribute('value')).to.equal(theme.name)
       await userEvent.selectOptions(select, [option])
       expect(
         saveSettingsMock.callHistory.called(`/user/settings`, {
-          body: { editorTheme: theme },
+          body: { editorTheme: theme.name },
         })
       ).to.be.true
     }
 
     for (const theme of legacyEditorThemes) {
       const option = within(select).getByText(
-        theme.replace(/_/g, ' ') + ' (Legacy)'
+        theme.name.replace(/_/g, ' ') + ' (Legacy)'
       )
-      expect(option.getAttribute('value')).to.equal(theme)
+      expect(option.getAttribute('value')).to.equal(theme.name)
       await userEvent.selectOptions(select, [option])
       expect(
         saveSettingsMock.callHistory.called(`/user/settings`, {
-          body: { editorTheme: theme },
+          body: { editorTheme: theme.name },
         })
       ).to.be.true
     }