Open Closed

How to change default Angular LeptonX style from "System" to "Light" #4333


User avatar
0
dkaczor created
  • ABP Framework version: v7.0.0
  • UI type: Angular
  • DB provider: EF Core
  • Tiered (MVC) or Identity Server Separated (Angular): no

I've migrated my project from v5.3.4 to 6.0.2 then to 7.0.0. When migrating from Lepton to LeptonX, the "System" style was set automatically. In my angluar app I want it to be "Light" by default. I cannot find any parameter that would set that setting in angular app. The "DefaultStyle" parameter in HttpApiHostModule configuration has no effect on the angular app. How can I change the default style for every new user?


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

    Please elaborate. Where do I inject this token and from where do I import LPX_THEMES and LPX_THEME_STYLES_DEFAULTS?

  • User Avatar
    0
    mahmut.gundogdu created

    Please elaborate. Where do I inject this token and from where do I import LPX_THEMES and LPX_THEME_STYLES_DEFAULTS?

    here the references import { LPX_THEMES, LPX_THEME_STYLES_DEFAULTS, StyleNames } from '@volosoft/ngx-lepton-x';

    '@volosoft/ngx-lepton-x' package is a dependency of @volosoft/abp.ng.theme.lepton-x no need to add a package.json it should work

Boost Your Development
ABP Live Training
Packages
See Trainings
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book
Made with ❤️ on ABP v10.0.0-preview. Updated on September 01, 2025, 08:37