Is it possible to detect the dark/light change of the LeptonX theme on Angular UI? #4341

7 Answer(s)

• 

  0

  mahmut.gundogdu created 2 years ago

  Support Team

  In the upcoming release, we'll include a simpler method to choose the default theme. I created a task. but for now, you can use the token to choose the default.

  {
      provide: LPX_THEMES,
      useValue:LPX_THEME_STYLES_DEFAULTS.map(item =>({
       ...item,
       defaultTheme: item.styleName === StyleNames.Light
  }
  

  Save Cancel
• 

  0

  mustafasezgin created 2 years ago

  I'm not sure you gave me the correct answer. I tried to ask how I can **detect ** when there is a change in the theme skin.

  Save Cancel
• 

  0

  mahmut.gundogdu created 2 years ago

  Support Team

  theme.service.ts is responsible for theme operation. that has the method name is "getInitialTheme". If you want to override, you can inherit the service and override the method.

  systemMediaQueryList = this.window.matchMedia('(prefers-color-scheme: dark)');
  

  the code detect dark or light. if you want to change by user interaction

  

  Save Cancel
• 

  0

  mustafasezgin created 2 years ago

  is there an event in theme.service.ts that is emitted on theme changes which I can subscribe and listen? I couldn't find one.

  Save Cancel
• 

  0

  mahmut.gundogdu created 2 years ago

  Support Team

  No We didn't but you can make yours. it just plain javascript.

   import { Injectable, OnDestroy } from '@angular/core';
  import { BehaviorSubject } from 'rxjs';
  
  @Injectable()
  export class AppearanceService implements OnDestroy {
    private matchMediaDarkMode() {
      return window.matchMedia('(prefers-color-scheme: dark)');
    }
    private _changed$ = new BehaviorSubject(this.matchMediaDarkMode().matches);
    changed$ = this._changed$.asObservable();
    private changeEvent = (event) => {
      this._changed$.next(event.matches);
    };
  
    constructor() {
      this.matchMediaDarkMode().addEventListener('change', this.changeEvent);
    }
    ngOnDestroy(): void {
      this.matchMediaDarkMode().removeEventListener('change', this.changeEvent);
    }
  }
  
  

  Save Cancel
• 

  0

  mahmut.gundogdu created 2 years ago

  Support Team

  is there an event in theme.service.ts that is emitted on theme changes which I can subscribe and listen? I couldn't find one.

  But maybe there is a missunderstand, if you want to catch user change the theme, you can do it with that code.

   export class AppComponent implements AfterViewInit {
    
    constructor( private themeService:ThemeService) { }
    
    ngAfterViewInit(): void {
      this.themeService.selectedStyle$.subscribe((style) => {
        alert('theme changed')
      });  }
  
  }
  

  Save Cancel
• 

  0

  mustafasezgin created 2 years ago

  is there an event in theme.service.ts that is emitted on theme changes which I can subscribe and listen? I couldn't find one.

  But maybe there is a missunderstand, if you want to catch user change the theme, you can do it with that code.

   export class AppComponent implements AfterViewInit { 
     
    constructor( private themeService:ThemeService) { } 
     
    ngAfterViewInit(): void { 
      this.themeService.selectedStyle$.subscribe((style) => { 
        alert('theme changed') 
      });  } 
   
  } 
  

  I was looking for this, thanks.

  Save Cancel