Make themed widgets reflect the effective theme

So that widgets such as Element Call will show up in the right theme even if the app is set to match the system theme.

Author: robintown

src/components/views/dialogs/ModalWidgetDialog.tsx

@@ -32,8 +32,8 @@ import { OwnProfileStore } from "../../../stores/OwnProfileStore";
 import { arrayFastClone } from "../../../utils/arrays";
 import { ElementWidget } from "../../../stores/widgets/StopGapWidget";
 import { ELEMENT_CLIENT_ID } from "../../../identifiers";
-import SettingsStore from "../../../settings/SettingsStore";
 import WarningBadgeSvg from "../../../../res/img/element-icons/warning-badge.svg";
+import ThemeWatcher from "../../../settings/watchers/ThemeWatcher";
 
 interface IProps {
     widgetDefinition: IModalWidgetOpenRequestData;
@@ -127,7 +127,7 @@ export default class ModalWidgetDialog extends React.PureComponent<IProps, IStat
             userDisplayName: OwnProfileStore.instance.displayName ?? undefined,
             userHttpAvatarUrl: OwnProfileStore.instance.getHttpAvatarUrl() ?? undefined,
             clientId: ELEMENT_CLIENT_ID,
-            clientTheme: SettingsStore.getValue("theme"),
+            clientTheme: new ThemeWatcher().getEffectiveTheme(),
             clientLanguage: getUserLanguage(),
             baseUrl: MatrixClientPeg.safeGet().baseUrl,
         });

src/stores/widgets/StopGapWidget.ts

@@ -37,7 +37,6 @@ import { MatrixClientPeg } from "../../MatrixClientPeg";
 import { OwnProfileStore } from "../OwnProfileStore";
 import WidgetUtils from "../../utils/WidgetUtils";
 import { IntegrationManagers } from "../../integrations/IntegrationManagers";
-import SettingsStore from "../../settings/SettingsStore";
 import { WidgetType } from "../../widgets/WidgetType";
 import ActiveWidgetStore from "../ActiveWidgetStore";
 import { objectShallowClone } from "../../utils/objects";
@@ -211,7 +210,7 @@ export class StopGapWidget extends EventEmitter {
             userDisplayName: OwnProfileStore.instance.displayName ?? undefined,
             userHttpAvatarUrl: OwnProfileStore.instance.getHttpAvatarUrl() ?? undefined,
             clientId: ELEMENT_CLIENT_ID,
-            clientTheme: SettingsStore.getValue("theme"),
+            clientTheme: new ThemeWatcher().getEffectiveTheme(),
             clientLanguage: getUserLanguage(),
             deviceId: this.client.getDeviceId() ?? undefined,
             baseUrl: this.client.baseUrl,