Open Closed

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


User avatar
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)
  • User Avatar
    0
    mahmut.gundogdu created

    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
    }
    
  • User Avatar
    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.

  • User Avatar
    0
    mahmut.gundogdu created

    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

  • User Avatar
    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.

  • User Avatar
    0
    mahmut.gundogdu created

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

Made with ❤️ on ABP v8.2.0-preview Updated on March 25, 2024, 15:11