LeptonX Angular UI

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
  • Then, edit angular.json as follows:

Add theme-specific styles into the styles array of the file. Check the Theme Configurations documentation for more information.

Importing a CSS file as an ECMA module is not supported in Angular 14. Therefore, we need to add the styles in the angular.json file.

  • 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 {}
TypeScript

If you want to use the Top Menu instead of the Side Menu, add TopMenuLayoutModule as below,and this style imports

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

@NgModule({
  // ...
  imports: [
    // ...
    // ThemeLeptonModule.forRoot(), -> remove this line.
    ThemeLeptonXModule.forRoot(),
    TopMenuLayoutModule.forRoot(),
  ],
  // ...
})
export class AppModule {}
TypeScript
  • 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;
  }
}
Sass (SCSS)

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.

Contributors

Avatar hikalkan
Last updated: July 31, 2024 Edit this page on GitHub

Was this page helpful?

Please make a selection.

To help us improve, please share your reason for the negative feedback in the field below.

Please enter a note.

Thank you for your valuable feedback!

Please note that although we cannot respond to feedback, our team will use your comments to improve the experience.

In this document
Community Talks

Deep Dive #1: Identity&Account Modules

17 Apr, 17:00
Online
Watch the Event
Boost Your Development
ABP Live Training
Packages
See Trainings
Mastering ABP Framework Book
Do you need assistance from an ABP expert?
Schedule a Meeting
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book