Filter by title

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.

  • At last, remove provideThemeLepton from app.config.ts, and add the following providers in app.config.ts
import { provideThemeLeptonX } from '@volosoft/abp.ng.theme.lepton-x';
import { provideSideMenuLayout } from '@volosoft/abp.ng.theme.lepton-x/layouts';
// import { provideThemeLepton } from '@volo/abp.ng.theme.lepton'; 

export const appConfig: ApplicationConfig = {
  providers: [
    // provideThemeLepton() delete this
    provideSideMenuLayout(), // depends on which layout you choose
    provideThemeLeptonX(),
  ],
};

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

import { provideThemeLeptonX } from '@volosoft/abp.ng.theme.lepton-x';
import { provideTopMenuLayout } from '@volosoft/abp.ng.theme.lepton-x/layouts';

export const appConfig: ApplicationConfig = {
  providers: [
    provideTopMenuLayout(),
    provideThemeLeptonX(),
  ],
};
  • 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.

Contributors


Last updated: August 06, 2025 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
ABP Community Talks
Beyond WordPress: A Developer-Friendly CMS for .NET
28 Aug, 17:00
Online
Watch the Event
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