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.

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<IProps, IState> {
         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<IProps, IState> {
                 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<IProps, IState> {
             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<IProps, IState> {
             ...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<IProps, IState> {
         });
         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<IProps, IState> {
      * crypto is disabled.) XXX: is this a bug or a feature?
      */
     private async onLoggedIn(): Promise<void> {
-        ThemeController.isLogin = false;
-        this.themeWatcher?.recheck();
         StorageManager.tryPersistStorage();
 
         await this.onShowPostLoginScreen();

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 = `<a href="https://matrix.org" target="_blank" rel="noreferrer noopener">
-    <img width="79" height="34" alt="Matrix" style="padding-left: 1px;vertical-align: middle" src="${matrixSvg}"/>
+    <img class="mx_WelcomePage_logo" width="79" height="34" alt="Matrix" style="padding-left: 1px;vertical-align: middle" src="${matrixSvg}"/>
 </a>`;