import { Injectable , ApplicationRef , NgZone } from '@angular/core' ; import { Meta } from '@angular/platform-browser' ; import { BehaviorSubject } from 'rxjs' ; @ Injectable ( { providedIn : 'root' } ) export class DarkModeService { public shouldDark = new BehaviorSubject ( false ) ; constructor ( private meta , private zone ) { const shouldMatch = window . matchMedia ( '(prefers-color-scheme: dark)' ) ; this . shouldDark . next ( shouldMatch . matches ) ; this . updateMeta ( ) ; shouldMatch . addListener ( ( { matches } ) => { this . shouldDark . next ( matches ) ; this . updateMeta ( ) ; } ) ; } updateMeta ( ) { this . zone . run ( ( ) => { const themeColor = getComputedStyle ( document . documentElement ) . getPropertyValue ( '--ion-background-color' ) ; this . meta . updateTag ( { name : 'theme-color' , content : themeColor } ) ; } ) ; } }