Open Closed

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


0
mustafasezgin created

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

  • ABP Framework version: 6
  • UI type: Angular

7 Answer(s)
  • 0
    mahmut.gundogdu created
    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
    }
    
  • 0
    mustafasezgin created

    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 created
    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

  • 0
    mustafasezgin created

    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 created
    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);
      }
    }
    
    
  • 0
    mahmut.gundogdu created
    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')
        });  }
    
    }
    
  • 0
    mustafasezgin created

    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.