Merge pull request #32936 from overleaf/mj-ce-themes

[web] Enable changing overall themes in SP/CE

GitOrigin-RevId: a6aa35e40826faec1001b658603b9f1cc8b0a50d

server-ce/test/editor.spec.ts

@@ -295,6 +295,26 @@ describe('editor', function () {
       })
     })
   })
+
+  describe('theming', function () {
+    it('can change overall theme in settings menu', function () {
+      cy.findByRole('button', { name: 'Settings' }).click()
+      cy.findByRole('dialog').within(() => {
+        cy.findByRole('tab', { name: 'Appearance' }).click()
+        cy.findByLabelText('Overall theme').select('Dark')
+      })
+      cy.get('body').should('have.attr', 'data-theme', 'default')
+      cy.get('body').type('{esc}')
+
+      cy.findByRole('button', { name: 'Settings' }).click()
+      cy.findByRole('dialog').within(() => {
+        cy.findByRole('tab', { name: 'Appearance' }).click()
+        cy.findByLabelText('Overall theme').select('Light')
+      })
+      cy.get('body').should('have.attr', 'data-theme', 'light')
+      cy.get('body').type('{esc}')
+    })
+  })
 })
 
 function createRandomLetterString() {

server-ce/test/project-list.spec.ts

@@ -113,5 +113,13 @@ describe('Project List', function () {
       cy.findByRole('button', { name: `Select tag ${tagName}` }).click()
       cy.findByRole('link', { name: nonTaggedProjectName }).should('not.exist')
     })
+
+    it('can change theme from the account menu', function () {
+      cy.findByRole('menuitem', { name: 'Account' }).click()
+      cy.findByLabelText('Dark').click()
+      cy.get('body').should('have.attr', 'data-theme', 'default')
+      cy.findByLabelText('Light').click()
+      cy.get('body').should('have.attr', 'data-theme', 'light')
+    })
   })
 })

services/web/app/src/infrastructure/ExpressLocals.mjs

@@ -305,23 +305,20 @@ export default async function (webRouter, privateApiRouter, publicApiRouter) {
   })
 
   webRouter.use(function (req, res, next) {
-    // TODO
+    res.locals.overallThemes = [
-    if (Settings.overleaf != null) {
+      {
-      res.locals.overallThemes = [
+        name: 'Dark',
-        {
+        val: '',
-          name: 'Dark',
+      },
-          val: '',
+      {
-        },
+        name: 'Light',
-        {
+        val: 'light-',
-          name: 'Light',
+      },
-          val: 'light-',
+      {
-        },
+        name: 'System',
-        {
+        val: 'system',
-          name: 'System',
+      },
-          val: 'system',
+    ]
-        },
-      ]
-    }
     next()
   })
 

services/web/app/views/project/editor/_meta.pug

@@ -57,8 +57,6 @@ meta(name="ol-loadingText" data-type="string" content=translate("loading"))
 meta(name="ol-translationIoNotLoaded" data-type="string" content=translate("could_not_connect_to_websocket_server"))
 meta(name="ol-translationLoadErrorMessage" data-type="string" content=translate("could_not_load_translations"))
 meta(name="ol-translationUnableToJoin" data-type="string" content=translate("could_not_connect_to_collaboration_server"))
-
+meta(name="ol-overallThemes" data-type="json" content=overallThemes)
-if (settings.overleaf != null)
-	meta(name="ol-overallThemes" data-type="json" content=overallThemes)
 
 != moduleIncludes("editor:meta", locals)

services/web/frontend/js/features/project-list/components/sidebar/theme-toggle.tsx

@@ -43,7 +43,10 @@ export default function ThemeToggle() {
                 checked={overallTheme === theme.val}
                 onChange={() => setOverallTheme(theme.val)}
               />
-              <label htmlFor={`theme-switch-${theme.name}`}>
+              <label
+                htmlFor={`theme-switch-${theme.name}`}
+                aria-label={theme.name}
+              >
                 <MaterialIcon type={getIcon(theme)} />
               </label>
             </div>

services/web/test/frontend/features/settings-modal/settings-modal.test.tsx

@@ -51,12 +51,10 @@ describe('<SettingsModal />', function () {
     {
       name: 'Overall Theme 1',
       val: '',
-      path: 'https://overleaf.com/overalltheme-1.css',
     },
     {
       name: 'Overall Theme 2',
       val: 'light-',
-      path: 'https://overleaf.com/overalltheme-2.css',
     },
   ]
 

services/web/test/frontend/features/settings-modal/settings/overall-theme-setting.test.tsx

@@ -17,12 +17,10 @@ describe('<OverallThemeSetting />', function () {
     {
       name: 'Overall Theme 1',
       val: '',
-      path: 'https://overleaf.com/overalltheme-1.css',
     },
     {
       name: 'Overall Theme 2',
       val: 'light-',
-      path: 'https://overleaf.com/overalltheme-2.css',
     },
   ]
 

services/web/types/project-settings.ts

@@ -21,7 +21,6 @@ export type ProjectCompiler = 'pdflatex' | 'latex' | 'xelatex' | 'lualatex'
 
 export type OverallThemeMeta = {
   name: string
-  path: string
   val: OverallTheme
 }