import { Injectable , ApplicationRef } from '@angular/core' ; import { BehaviorSubject } from 'rxjs' ; export enum Themes { Default = 'theme-default' , Dark = 'theme-dark' } @ Injectable ( { providedIn : 'root' } ) export class ThemeService { currentTheme = new BehaviorSubject ( Themes . Default ) ; constructor ( private ref ) { const isLightTheme = window . matchMedia && window . matchMedia ( '(prefers-color-scheme: light)' ) . matches ; isLightTheme ? this . currentTheme . next ( Themes . Default ) : this . currentTheme . next ( Themes . Dark ) ; const prefersColorTheme = window . matchMedia ( '(prefers-color-scheme: light)' ) ; try { prefersColorTheme . addEventListener ( 'change' , ( e ) => { const turnOn = e . matches ; this . currentTheme . next ( turnOn ? Themes . Default : Themes . Dark ) ; this . ref . tick ( ) ; } ) ; } catch ( err ) { try { prefersColorTheme . addListener ( ( e ) => { const turnOn = e . matches ; this . currentTheme . next ( turnOn ? Themes . Default : Themes . Dark ) ; this . ref . tick ( ) ; } ) ; } catch ( errSafari ) { console . error ( errSafari ) ; } } } setTheme ( value ) { this . currentTheme . next ( value ) ; } getTheme ( ) { return this . currentTheme . getValue ( ) ; } }