Change LeptonX style to light or dark by code #5566

7 Answer(s)

• 

  0

  Anjali_Musmade created one year ago

  Support Team Support Team Member

  Hi,

  Could you please try to change ConfigureTheme in YourProject.Host -> HttpApiHostModule.cs from System to Light

  

  Save Cancel
• 

  0

  justinlee0516 created one year ago

  Thanks for your reply. But I am using Angular UI, and that does not work.

  Save Cancel
• 

  0

  Anjali_Musmade created one year ago

  Support Team Support Team Member

  Hi, I am also using Angular UI, it works at my end. Could you please check your solution explorer at backend it has solution ***.HttpAPI.Host at the end of list.

  Save Cancel
• 

  0

  mahmut.gundogdu created one year ago

  We will add easier way to define default theme. I have opened issue. But for a now. go to your app.module.ts

  import {LPX_THEMES,LPX_THEME_STYLES_DEFAULTS} from "@volosoft/ngx-lepton-x";
  
  const defaultThemes = [...LPX_THEME_STYLES_DEFAULTS].map((theme) => {
    const defaultTheme = theme.styleName  === "dim";
    return {...theme,defaultTheme}
  })
  
  
  // add this as proveder/
  
  {
      provide:LPX_THEMES,
      useValue: defaultThemes
  }
  

  

  Save Cancel
• 

  0

  CI created one year ago

  Oi, I made this configuration, but my google browser is in dark mode and the abp is getting dark mode, there is also a way to force light?

  Save Cancel
• 

  0

  justinlee0516 created one year ago

  Hi, I am also using Angular UI, it works at my end. Could you please check your solution explorer at backend it has solution ***.HttpAPI.Host at the end of list.

  Yes. You should test in Chrome Incognito Window.

  Save Cancel
• 

  0

  justinlee0516 created one year ago

  Found the solution.

  -- app.component.cs --

  import { ThemeService, StyleNames, lightTheme } from '@volosoft/ngx-lepton-x';
  
  export class AppComponent {
    
    constructor(private themeService: ThemeService) {
      if (this.themeService.selectedStyle.styleName != StyleNames.Light) {
        this.themeService.setTheme(lightTheme);
      }
    }
  }
  

  Save Cancel