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
fromapp.module.ts
andshared.module.ts
, and import the following modules inapp.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;
}
}
Importing a CSS file as an ECMA module does not supporting in Angular 14. (see the release note) So we should add styles in angular.json file. Check the Theme Configurations
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.