diff --git a/apps/browser/src/background/main.background.ts b/apps/browser/src/background/main.background.ts index f4ffb1f9780..e529e6a39e7 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 657c64fe725..e300521bb6c 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(service: keyof MainBackground) { provide: FileDownloadService, useClass: BrowserFileDownloadService, }, + { + provide: AbstractThemingService, + useFactory: () => { + return new ThemingService( + getBgService("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")().isSafari() + ? getBgService("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 7d67503694c..b57747b8d06 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();