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

  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

  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

  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

  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