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
2026-11-15 06:33:55 +01:00 · 2025-12-12 09:05:10 +00:00
parent 96a071dd04
commit b554b0cfcc
20 changed files with 476 additions and 42 deletions
@@ -0,0 +1,78 @@
+import { useActiveEditorTheme } from '@/shared/hooks/use-active-editor-theme'
+import { EditorProviders } from '../../helpers/editor-providers'
+import { SplitTestProvider } from '@/shared/context/split-test-context'
+
+const MOCK_IEEE_BRAND_ID = 123
+
+const TestComponent = ({ overallTheme }: { overallTheme: string }) => {
+  return (
+    <SplitTestProvider>
+      <EditorProviders
+        userSettings={{
+          overallTheme,
+          editorTheme: 'default-theme',
+          editorLightTheme: 'light-theme',
+          editorDarkTheme: 'dark-theme',
+        }}
+      >
+        <TestComponentInner />
+      </EditorProviders>
+    </SplitTestProvider>
+  )
+}
+
+const TestComponentInner = () => {
+  const editorTheme = useActiveEditorTheme()
+  return <div data-testid="editor-theme">{editorTheme}</div>
+}
+
+describe('useActiveEditorTheme', function () {
+  describe('when overall theme is specific mode', function () {
+    it('Uses editorTheme when in dark mode', function () {
+      cy.mount(<TestComponent overallTheme="" />)
+      cy.findByTestId('editor-theme').should('have.text', 'default-theme')
+    })
+
+    it('Uses editorTheme when in light mode', function () {
+      cy.mount(<TestComponent overallTheme="light-" />)
+      cy.findByTestId('editor-theme').should('have.text', 'default-theme')
+    })
+  })
+
+  describe('when overall theme is system', function () {
+    function stubMediaQuery(prefersDark: boolean, isIEEE = false) {
+      cy.window().then(win => {
+        win.metaAttributesCache.set('ol-brandVariation', {
+          brand_id: isIEEE ? MOCK_IEEE_BRAND_ID : undefined,
+        })
+        win.metaAttributesCache.get('ol-ExposedSettings').ieeeBrandId =
+          MOCK_IEEE_BRAND_ID
+        cy.stub(win, 'matchMedia')
+          .withArgs('(prefers-color-scheme: dark)')
+          .returns({
+            matches: prefersDark,
+            addEventListener: () => {},
+            removeEventListener: () => {},
+          } as any)
+      })
+    }
+
+    it('uses editorDarkTheme when in dark mode', function () {
+      stubMediaQuery(true)
+      cy.mount(<TestComponent overallTheme="system" />)
+      cy.findByTestId('editor-theme').should('have.text', 'dark-theme')
+    })
+
+    it('uses editorLightTheme when in light mode', function () {
+      stubMediaQuery(false)
+      cy.mount(<TestComponent overallTheme="system" />)
+      cy.findByTestId('editor-theme').should('have.text', 'light-theme')
+    })
+
+    it('uses editorTheme when in IEEE document', function () {
+      stubMediaQuery(false, true)
+      cy.mount(<TestComponent overallTheme="system" />)
+      cy.findByTestId('editor-theme').should('have.text', 'default-theme')
+    })
+  })
+})
@@ -0,0 +1,81 @@
+import { EditorProviders } from '../../helpers/editor-providers'
+import { SplitTestProvider } from '@/shared/context/split-test-context'
+import { useActiveOverallTheme } from '@/shared/hooks/use-active-overall-theme'
+
+const MOCK_IEEE_BRAND_ID = 123
+
+const TestComponent = ({ overallTheme }: { overallTheme: string }) => {
+  return (
+    <SplitTestProvider>
+      <EditorProviders
+        userSettings={{
+          overallTheme,
+        }}
+      >
+        <TestComponentInner />
+      </EditorProviders>
+    </SplitTestProvider>
+  )
+}
+
+const TestComponentInner = () => {
+  const overallTheme = useActiveOverallTheme()
+  return <div data-testid="overall-theme">{overallTheme}</div>
+}
+
+describe('useActiveOverallTheme', function () {
+  beforeEach(function () {
+    cy.window().then(win => {
+      win.metaAttributesCache.set('ol-brandVariation', { brand_id: undefined })
+      win.metaAttributesCache.get('ol-ExposedSettings').ieeeBrandId =
+        MOCK_IEEE_BRAND_ID
+    })
+  })
+
+  it('Is dark in default mode', function () {
+    cy.mount(<TestComponent overallTheme="" />)
+    cy.findByTestId('overall-theme').should('have.text', 'dark')
+  })
+
+  it('Is light when in light mode', function () {
+    cy.mount(<TestComponent overallTheme="light-" />)
+    cy.findByTestId('overall-theme').should('have.text', 'light')
+  })
+
+  describe('when overall theme is system', function () {
+    function stubMediaQuery(prefersDark: boolean) {
+      cy.window().then(win => {
+        cy.stub(win, 'matchMedia')
+          .withArgs('(prefers-color-scheme: dark)')
+          .returns({
+            matches: prefersDark,
+            addEventListener: () => {},
+            removeEventListener: () => {},
+          } as any)
+      })
+    }
+
+    it('is dark when browser prefers dark', function () {
+      stubMediaQuery(true)
+      cy.mount(<TestComponent overallTheme="system" />)
+      cy.findByTestId('overall-theme').should('have.text', 'dark')
+    })
+
+    it('is light when browser prefers light', function () {
+      stubMediaQuery(false)
+      cy.mount(<TestComponent overallTheme="system" />)
+      cy.findByTestId('overall-theme').should('have.text', 'light')
+    })
+
+    it('uses dark when in IEEE document', function () {
+      stubMediaQuery(false)
+      cy.window().then(win => {
+        win.metaAttributesCache.set('ol-brandVariation', {
+          brand_id: MOCK_IEEE_BRAND_ID,
+        })
+      })
+      cy.mount(<TestComponent overallTheme="system" />)
+      cy.findByTestId('overall-theme').should('have.text', 'dark')
+    })
+  })
+})