[fix] System theming in the Safari extension (#3107)

apps/browser/src/background/main.background.ts

@@ -153,6 +153,9 @@ export default class MainBackground {
   broadcasterService: BroadcasterService;
   folderApiService: FolderApiServiceAbstraction;
 
+  // Passed to the popup for Safari to workaround issues with theming, downloading, etc.
+  backgroundWindow = window;
+
   onUpdatedRan: boolean;
   onReplacedRan: boolean;
   loginToAutoFill: CipherView = null;

apps/browser/src/popup/services/services.module.ts

@@ -7,6 +7,8 @@ import {
   MEMORY_STORAGE,
   SECURE_STORAGE,
 } from "@bitwarden/angular/services/jslib-services.module";
+import { ThemingService } from "@bitwarden/angular/services/theming/theming.service";
+import { AbstractThemingService } from "@bitwarden/angular/services/theming/theming.service.abstraction";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { AppIdService } from "@bitwarden/common/abstractions/appId.service";
 import { AuditService } from "@bitwarden/common/abstractions/audit.service";
@@ -293,6 +295,20 @@ function getBgService<T>(service: keyof MainBackground) {
       provide: FileDownloadService,
       useClass: BrowserFileDownloadService,
     },
+    {
+      provide: AbstractThemingService,
+      useFactory: () => {
+        return new ThemingService(
+          getBgService<StateServiceAbstraction>("stateService")(),
+          // Safari doesn't properly handle the (prefers-color-scheme) media query in the popup window, it always returns light.
+          // In Safari we have to use the background page instead, which comes with limitations like not dynamically changing the extension theme when the system theme is changed.
+          getBgService<PlatformUtilsService>("platformUtilsService")().isSafari()
+            ? getBgService<Window>("backgroundWindow")()
+            : window,
+          document
+        );
+      },
+    },
   ],
 })
 export class ServicesModule {}

libs/angular/src/services/theming/theming.service.ts

@@ -17,7 +17,7 @@ export class ThemingService implements AbstractThemingService {
 
   constructor(
     private stateService: StateService,
-    private mediaMatcher: MediaMatcher,
+    private mediaMatcher: MediaMatcher | Window,
     @Inject(DOCUMENT) private document: Document
   ) {
     this.monitorThemeChanges();