diff --git a/server-ce/test/editor.spec.ts b/server-ce/test/editor.spec.ts index b5954104f9..e63e70e666 100644 --- a/server-ce/test/editor.spec.ts +++ b/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() { diff --git a/server-ce/test/project-list.spec.ts b/server-ce/test/project-list.spec.ts index c4ee3cf238..fb61cc9012 100644 --- a/server-ce/test/project-list.spec.ts +++ b/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') + }) }) }) diff --git a/services/web/app/src/infrastructure/ExpressLocals.mjs b/services/web/app/src/infrastructure/ExpressLocals.mjs index 4587356b38..09e8f072aa 100644 --- a/services/web/app/src/infrastructure/ExpressLocals.mjs +++ b/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 - if (Settings.overleaf != null) { - res.locals.overallThemes = [ - { - name: 'Dark', - val: '', - }, - { - name: 'Light', - val: 'light-', - }, - { - name: 'System', - val: 'system', - }, - ] - } + res.locals.overallThemes = [ + { + name: 'Dark', + val: '', + }, + { + name: 'Light', + val: 'light-', + }, + { + name: 'System', + val: 'system', + }, + ] next() }) diff --git a/services/web/app/views/project/editor/_meta.pug b/services/web/app/views/project/editor/_meta.pug index 7f93e96ccf..7ac843ba7c 100644 --- a/services/web/app/views/project/editor/_meta.pug +++ b/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")) - -if (settings.overleaf != null) - meta(name="ol-overallThemes" data-type="json" content=overallThemes) +meta(name="ol-overallThemes" data-type="json" content=overallThemes) != moduleIncludes("editor:meta", locals) diff --git a/services/web/frontend/js/features/project-list/components/sidebar/theme-toggle.tsx b/services/web/frontend/js/features/project-list/components/sidebar/theme-toggle.tsx index 37c4a3b121..708aed59d7 100644 --- a/services/web/frontend/js/features/project-list/components/sidebar/theme-toggle.tsx +++ b/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)} /> -