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

7 उत्तर (ओं)

• 

  0

  mahmut.gundogdu बनाया था one year 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
  }
  

  बचाना रद्द करना
• 

  0

  mustafasezgin बनाया था one year 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.

  बचाना रद्द करना
• 

  0

  mahmut.gundogdu बनाया था one year 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

  

  बचाना रद्द करना
• 

  0

  mustafasezgin बनाया था one year 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.

  बचाना रद्द करना
• 

  0

  mahmut.gundogdu बनाया था one year 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);
    }
  }
  
  

  बचाना रद्द करना
• 

  0

  mahmut.gundogdu बनाया था one year 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')
      });  }
  
  }
  

  बचाना रद्द करना
• 

  0

  mustafasezgin बनाया था one year 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.

  बचाना रद्द करना