From 4be301f125f60fa23f9e0017da2db9c7e093c6eb Mon Sep 17 00:00:00 2001
From: Addison Beck <addisonbeck1@gmail.com>
Date: Thu, 14 Jul 2022 14:47:45 -0400
Subject: [PATCH] [fix] System theming in the Safari extension (#3107)

---
 apps/browser/src/background/main.background.ts   |  3 +++
 .../src/popup/services/services.module.ts        | 16 ++++++++++++++++
 .../src/services/theming/theming.service.ts      |  2 +-
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/apps/browser/src/background/main.background.ts b/apps/browser/src/background/main.background.ts
index f4ffb1f978..e529e6a39e 100644
--- a/apps/browser/src/background/main.background.ts
+++ b/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;
diff --git a/apps/browser/src/popup/services/services.module.ts b/apps/browser/src/popup/services/services.module.ts
index 657c64fe72..e300521bb6 100644
--- a/apps/browser/src/popup/services/services.module.ts
+++ b/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 {}
diff --git a/libs/angular/src/services/theming/theming.service.ts b/libs/angular/src/services/theming/theming.service.ts
index 7d67503694..b57747b8d0 100644
--- a/libs/angular/src/services/theming/theming.service.ts
+++ b/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();