From 5f07fbbc1be14fc67979822437831993a4ddcc2a Mon Sep 17 00:00:00 2001 From: Richard van der Hoff <1389908+richvdh@users.noreply.github.com> Date: Wed, 26 Nov 2025 07:54:40 +0000 Subject: [PATCH] Allow the Login screen to use the dark theme (#31293) * Allow the Login screen to use the dark theme There is a whole bunch of code dedicated to attempting to force a "light" theme onto the login view, even if the deployment is configured to prioritise the dark theme. Apparently this was done because, in the old days, the login view looked rubbish with the dark theme, but now it looks fine. Fixes https://github.com/element-hq/element-web/issues/31292 * Fix up background colour of auth screen in dark theme In dark theme, the background of the login/register/welcome box needs to be translucent black rather than translucent white. To make this work, I've moved the style from inline to CSS, and used a PostCSS variable to define the colour. * Fix up Welcome page colours in dark theme Make the text and image white, not black, in short. * Fix incorrect merge that will teach me to use the Github UI to address merge conflicts. --- res/css/views/auth/_AuthPage.pcss | 7 ++++++- res/css/views/auth/_Welcome.pcss | 5 +++++ res/themes/dark/css/_dark.pcss | 2 ++ res/themes/legacy-light/css/_legacy-light.pcss | 1 + res/themes/light/css/_light.pcss | 2 ++ res/welcome.html | 1 - src/components/structures/MatrixChat.tsx | 13 ------------- src/components/structures/static-page-vars.ts | 2 +- src/components/views/auth/AuthPage.tsx | 3 +-- src/settings/controllers/ThemeController.ts | 4 ---- src/settings/watchers/ThemeWatcher.ts | 10 ---------- .../__snapshots__/MatrixChat-test.tsx.snap | 4 ++-- .../auth/__snapshots__/AuthPage-test.tsx.snap | 2 +- .../settings/controllers/ThemeController-test.ts | 15 --------------- 14 files changed, 21 insertions(+), 50 deletions(-) diff --git a/res/css/views/auth/_AuthPage.pcss b/res/css/views/auth/_AuthPage.pcss index 4ea4f1ffbb..e7a578b2f1 100644 --- a/res/css/views/auth/_AuthPage.pcss +++ b/res/css/views/auth/_AuthPage.pcss @@ -29,8 +29,13 @@ Please see LICENSE files in the repository root for full details. margin-top: 0; } - /* Apply a blurred shadow around the modal */ &.mx_AuthPage_modal_withBlur { + /* Apply a blurred shadow around the modal */ box-shadow: 0 2px 4px 0 rgb(0, 0, 0, 0.33); + + .mx_AuthPage_modalContent { + /* Make the modal's background semitransparent */ + background-color: $authpage-modal-content-with-blur-bg-color; + } } } diff --git a/res/css/views/auth/_Welcome.pcss b/res/css/views/auth/_Welcome.pcss index 490b6490f6..50a91aa767 100644 --- a/res/css/views/auth/_Welcome.pcss +++ b/res/css/views/auth/_Welcome.pcss @@ -20,3 +20,8 @@ Please see LICENSE files in the repository root for full details. width: 160px; margin-bottom: 10px; } + +/* Invert image colours in dark mode. */ +.cpd-theme-dark .mx_WelcomePage_logo { + filter: invert(1); +} diff --git a/res/themes/dark/css/_dark.pcss b/res/themes/dark/css/_dark.pcss index c9c86717e6..326c2cd646 100644 --- a/res/themes/dark/css/_dark.pcss +++ b/res/themes/dark/css/_dark.pcss @@ -176,6 +176,8 @@ $togglesw-off-color: $room-highlight-color; /* Authpage */ /* ******************** */ $authpage-primary-color: $primary-content; +/* background colour of the modal, when the background is blurred */ +$authpage-modal-content-with-blur-bg-color: rgb(0, 0, 0, 0.59); /* ******************** */ /* Message action bar */ diff --git a/res/themes/legacy-light/css/_legacy-light.pcss b/res/themes/legacy-light/css/_legacy-light.pcss index 7b95ded5d4..ca90eb2e55 100644 --- a/res/themes/legacy-light/css/_legacy-light.pcss +++ b/res/themes/legacy-light/css/_legacy-light.pcss @@ -275,6 +275,7 @@ $progressbar-bg-color: rgba(141, 151, 165, 0.2); $authpage-bg-color: #2e3649; $authpage-modal-bg-color: rgba(255, 255, 255, 0.59); +$authpage-modal-content-with-blur-bg-color: rgb(255, 255, 255, 0.59); $authpage-focus-bg-color: #dddddd; $authpage-lang-color: $secondary-content; $authpage-primary-color: $primary-content; diff --git a/res/themes/light/css/_light.pcss b/res/themes/light/css/_light.pcss index 8edf5b814a..f01a85cb4c 100644 --- a/res/themes/light/css/_light.pcss +++ b/res/themes/light/css/_light.pcss @@ -245,6 +245,8 @@ $togglesw-ball-color: var(--cpd-color-bg-action-primary-rest); $authpage-primary-color: #232f32; $authpage-bg-color: #2e3649; $authpage-modal-bg-color: $roomlist-bg-color; +/* background colour of the modal, when the background is blurred */ +$authpage-modal-content-with-blur-bg-color: rgb(255, 255, 255, 0.59); $authpage-focus-bg-color: $focus-bg-color; $authpage-lang-color: $secondary-content; $authpage-primary-color: $primary-content; diff --git a/res/welcome.html b/res/welcome.html index d2e87c3be8..f1cf3911f4 100644 --- a/res/welcome.html +++ b/res/welcome.html @@ -27,7 +27,6 @@ align-items: center; text-align: center; padding: 25px 35px; - color: #2e2f32; } .mx_Logo { diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx index b734dc9138..b0b45e4add 100644 --- a/src/components/structures/MatrixChat.tsx +++ b/src/components/structures/MatrixChat.tsx @@ -47,7 +47,6 @@ import PageType from "../../PageTypes"; import createRoom, { type IOpts } from "../../createRoom"; import { _t, _td } from "../../languageHandler"; import SettingsStore from "../../settings/SettingsStore"; -import ThemeController from "../../settings/controllers/ThemeController"; import { startAnyRegistrationFlow } from "../../Registration"; import AutoDiscoveryUtils from "../../utils/AutoDiscoveryUtils"; import { calculateRoomVia, makeRoomPermalink } from "../../utils/permalinks/Permalinks"; @@ -1016,8 +1015,6 @@ export default class MatrixChat extends React.PureComponent { newState.isMobileRegistration = isMobileRegistration; this.setStateForNewView(newState); - ThemeController.isLogin = true; - this.themeWatcher?.recheck(); this.notifyNewScreen(isMobileRegistration ? "mobile_register" : "register"); } @@ -1089,8 +1086,6 @@ export default class MatrixChat extends React.PureComponent { roomJustCreatedOpts: roomInfo.justCreatedOpts, }, () => { - ThemeController.isLogin = false; - this.themeWatcher?.recheck(); this.notifyNewScreen("room/" + presentedId, replaceLast); }, ); @@ -1115,8 +1110,6 @@ export default class MatrixChat extends React.PureComponent { view: Views.WELCOME, }); this.notifyNewScreen("welcome"); - ThemeController.isLogin = true; - this.themeWatcher?.recheck(); } private viewLogin(otherState?: any): void { @@ -1125,8 +1118,6 @@ export default class MatrixChat extends React.PureComponent { ...otherState, }); this.notifyNewScreen("login"); - ThemeController.isLogin = true; - this.themeWatcher?.recheck(); } private viewHome(justRegistered = false): void { @@ -1138,8 +1129,6 @@ export default class MatrixChat extends React.PureComponent { }); this.setPage(PageType.HomePage); this.notifyNewScreen("home"); - ThemeController.isLogin = false; - this.themeWatcher?.recheck(); } private viewUser(userId: string, subAction: string): void { @@ -1414,8 +1403,6 @@ export default class MatrixChat extends React.PureComponent { * crypto is disabled.) XXX: is this a bug or a feature? */ private async onLoggedIn(): Promise { - ThemeController.isLogin = false; - this.themeWatcher?.recheck(); StorageManager.tryPersistStorage(); await this.onShowPostLoginScreen(); diff --git a/src/components/structures/static-page-vars.ts b/src/components/structures/static-page-vars.ts index e27a449546..b5f21ea195 100644 --- a/src/components/structures/static-page-vars.ts +++ b/src/components/structures/static-page-vars.ts @@ -14,5 +14,5 @@ const matrixSvg = require("../../../res/img/matrix.svg").default; * Intended to replace $matrixLogo in the welcome page. */ export const MATRIX_LOGO_HTML = ` - Matrix + `; diff --git a/src/components/views/auth/AuthPage.tsx b/src/components/views/auth/AuthPage.tsx index 05da48bf2e..adc901f6c9 100644 --- a/src/components/views/auth/AuthPage.tsx +++ b/src/components/views/auth/AuthPage.tsx @@ -75,9 +75,8 @@ export default class AuthPage extends React.PureComponent; - modalContentStyle.background = "rgba(255, 255, 255, 0.59)"; } const modalClasses = classNames({ diff --git a/src/settings/controllers/ThemeController.ts b/src/settings/controllers/ThemeController.ts index 32a13ff8b7..567cc59735 100644 --- a/src/settings/controllers/ThemeController.ts +++ b/src/settings/controllers/ThemeController.ts @@ -12,8 +12,6 @@ import { DEFAULT_THEME, enumerateThemes } from "../../theme"; import { type SettingLevel } from "../SettingLevel"; export default class ThemeController extends SettingController { - public static isLogin = false; - public getValueOverride( level: SettingLevel, roomId: string, @@ -22,8 +20,6 @@ export default class ThemeController extends SettingController { ): any { if (!calculatedValue) return null; // Don't override null themes - if (ThemeController.isLogin) return "light"; - const themes = enumerateThemes(); // Override in case some no longer supported theme is stored here if (!themes[calculatedValue]) { diff --git a/src/settings/watchers/ThemeWatcher.ts b/src/settings/watchers/ThemeWatcher.ts index 5ee5810884..d066e38f6f 100644 --- a/src/settings/watchers/ThemeWatcher.ts +++ b/src/settings/watchers/ThemeWatcher.ts @@ -13,7 +13,6 @@ import { TypedEventEmitter } from "matrix-js-sdk/src/matrix"; import SettingsStore from "../SettingsStore"; import dis from "../../dispatcher/dispatcher"; import { Action } from "../../dispatcher/actions"; -import ThemeController from "../controllers/ThemeController"; import { findHighContrastTheme } from "../../theme"; import { type ActionPayload } from "../../dispatcher/payloads"; import { SettingLevel } from "../SettingLevel"; @@ -88,15 +87,6 @@ export default class ThemeWatcher extends TypedEventEmitter Multi-tab lockout waits for other tab to stop during sta
with a soft-logged-out session should show the soft-logo
should match snapshot 1`] = `
diff --git a/test/unit-tests/settings/controllers/ThemeController-test.ts b/test/unit-tests/settings/controllers/ThemeController-test.ts index c8eb607898..4cce1d85ed 100644 --- a/test/unit-tests/settings/controllers/ThemeController-test.ts +++ b/test/unit-tests/settings/controllers/ThemeController-test.ts @@ -14,11 +14,6 @@ import { DEFAULT_THEME } from "../../../../src/theme"; describe("ThemeController", () => { jest.spyOn(SettingsStore, "getValue").mockReturnValue([]); - afterEach(() => { - // reset - ThemeController.isLogin = false; - }); - it("returns null when calculatedValue is falsy", () => { const controller = new ThemeController(); @@ -32,16 +27,6 @@ describe("ThemeController", () => { ).toEqual(null); }); - it("returns light when login flag is set", () => { - const controller = new ThemeController(); - - ThemeController.isLogin = true; - - expect(controller.getValueOverride(SettingLevel.ACCOUNT, "$room:server", "dark", SettingLevel.ACCOUNT)).toEqual( - "light", - ); - }); - it("returns default theme when value is not a valid theme", () => { const controller = new ThemeController();