Client Side

To add LeptonX into your existing projects, follow the steps below.

• Firstly, install @volosoft/abp.ng.theme.lepton-x using the command below.

yarn add @volosoft/abp.ng.theme.lepton-x@preview

• Then, edit angular.json as follows:

Add the following ones into the styles array

"node_modules/bootstrap-icons/font/bootstrap-icons.css",

• At last, remove ThemeLeptonModule from app.module.ts and shared.module.ts, and import the following modules in app.module.ts

import { HttpErrorComponent, ThemeLeptonXModule } from '@volosoft/abp.ng.theme.lepton-x';
import { SideMenuLayoutModule } from '@volosoft/abp.ng.theme.lepton-x/layouts';

@NgModule({
  // ...
  imports: [
    // ...
    // ThemeLeptonModule.forRoot(), -> remove this line.
    ThemeLeptonXModule.forRoot(),
    SideMenuLayoutModule.forRoot(), // depends on which layout you choose
    // ...
  ],
  // ...
})
export class AppModule {}

Note: If you are using Resource Owner Password Flow for authorization, you should import the following module as well to app.module.ts:

import { AccountLayoutModule } from '@volosoft/abp.ng.theme.lepton-x/account';

@NgModule({
  // ...
  imports: [
    // ...
    AccountLayoutModule.forRoot({
      layout: {
        authLayoutImg: '/assets/images/login-bg.jpg',
      },
    }),
    // ...
  ],
  // ...
})
export class AppModule {}

authLayoutImg: (Optional) If not given, a default image will be placed on the authentication pages.

• At this point, LeptonX theme should be up and running within your application. However, you may need to overwrite some css variables based your needs for every theme available as follows:

:root {
  .lpx-theme-dark {
    --lpx-logo: url('/assets/images/logo/logo-light.svg');
    --lpx-logo-icon: url('/assets/images/logo/logo-light-icon.svg');
    --lpx-brand: #edae53;
  }

  .lpx-theme-dim {
    --lpx-logo: url('/assets/images/logo/logo-light.svg');
    --lpx-logo-icon: url('/assets/images/logo/logo-light-icon.svg');
    --lpx-brand: #f15835;
  }

  .lpx-theme-light {
    --lpx-logo: url('/assets/images/logo/logo-dark.svg');
    --lpx-logo-icon: url('/assets/images/logo/logo-dark-icon.svg');
    --lpx-brand: #69aada;
  }
}

If everything is ok, you can remove the @volo/abp.ng.theme.lepton in package.json

Server Side

In order to migrate to LeptonX on your server side projects (Host and/or IdentityServer projects), please follow Server Side Migration document.