import { State , Action , Selector , StateContext } from '@ngxs/store' ; import { ChangeThemeAction , ChangeAutoNightMode } from '../actions/settings.action' ; import { OverlayContainer } from '@angular/cdk/overlay' ; export interface SettingsStateModel { selectedTheme : string ; } @ State < SettingsStateModel > ( { name : 'settings' , defaults : { selectedTheme : 'hello world' } } ) export class SettingsState { constructor ( private overlayContainer ) { } @ Selector ( ) public static getState ( state ) { return state ; } @ Selector ( ) public static getEffectiveTheme ( state ) { return state . selectedTheme ; } @ Action ( ChangeAutoNightMode ) public changeAutoNightMode ( { patchState } ) { } @ Action ( ChangeThemeAction ) public changeTheme ( { patchState } , action ) { const classList = this . overlayContainer . getContainerElement ( ) . classList ; const toRemove = Array . from ( classList ) . filter ( ( item ) => item . includes ( '-theme' ) ) ; if ( toRemove . length ) { classList . remove ( ... toRemove ) ; } classList . add ( action . changeTheme ) ; patchState ( { selectedTheme : action . changeTheme } ) ; } }