update: theme pages

docs/en/ui-themes/lepton-x-lite/angular.md

@@ -31,42 +31,37 @@ yarn add bootstrap-icons
 Note: You should remove the old theme styles from "angular.json" if you are switching from "ThemeBasic" or "Lepton."
 Look at the [Theme Configurations](../../framework/ui/angular/theme-configurations.md) list of styles. Depending on your theme, you can alter your styles in angular.json.
 
-- Finally, remove `ThemeBasicModule`, `provideThemeBasicConfig` from `app.module.ts`, and import the related modules in `app.module.ts`
+- Finally, remove `provideThemeBasicConfig` from `app.config.ts`, and import the related providers in `app.config.ts`
 
 ```js
-import { ThemeLeptonXModule } from "@abp/ng.theme.lepton-x";
+import { provideThemeLeptonX, withThemeLeptonXOptions } from "@abp/ng.theme.lepton-x";
-
+import { provideSideMenuLayout } from "@abp/ng.theme.lepton-x/layouts";
-@NgModule({
+
-  imports: [
+export const appConfig: ApplicationConfig = {
-    // ...
-    // do not forget to remove ThemeBasicModule or other old theme module
-    //  ThemeBasicModule
-    ThemeLeptonXModule.forRoot()
-  ],
   providers: [
-    // do not forget to remove provideThemeBasicConfig or other old theme providers
+    provideSideMenuLayout(),
-    // provideThemeBasicConfig
+    provideThemeLeptonX(
+      withThemeLeptonXOptions({
+        styleFactory: (styles) => {
+          return styles;
+        },
+      })
+    ),
   ],
-  // ...
+};
-})
-export class AppModule {}
 ```
 
-Note: If you employ [Resource Owner Password Flow](../../framework/ui/angular/authorization.md#resource-owner-password-flow) for authorization, you should import the following module as well:
+Note: If you employ [Resource Owner Password Flow](../../framework/ui/angular/authorization.md#resource-owner-password-flow) for authorization, you should provide the following provider as well:
 
 ```js
-import { AccountLayoutModule } from "@abp/ng.theme.lepton-x/account";
+import { provideAccountLayout } from "@abp/ng.theme.lepton-x/account";
-
+
-@NgModule({
+export const appConfig: ApplicationConfig = {
-  // ...
+  providers: [
-  imports: [
+    provideAccountLayout()
-    // ...
-    AccountLayoutModule.forRoot(),
-    // ...
   ],
-  // ...
+};
-})
+
-export class AppModule {}
 ```
 
 To change the logos and brand color of `LeptonX`, simply add the following CSS to the `styles.scss`

docs/en/ui-themes/lepton-x/angular.md

@@ -9,51 +9,60 @@ To add `LeptonX` into your existing projects, follow the steps below.
 
 Add theme-specific styles into the `styles` array of the file. Check the [Theme Configurations](../../framework/ui/angular/theme-configurations.md#lepton-x-commercial) 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`
+- At last, remove `provideThemeLepton` from `app.config.ts`, and add the following providers in `app.config.ts`
+
 
 ```ts
-import {
+import { provideThemeLeptonX, withThemeLeptonXOptions } from '@volosoft/abp.ng.theme.lepton-x';
-  HttpErrorComponent,
+import { provideSideMenuLayout } from '@volosoft/abp.ng.theme.lepton-x/layouts';
-  ThemeLeptonXModule,
+// import { provideThemeLepton } from '@volo/abp.ng.theme.lepton'; 
-} from "@volosoft/abp.ng.theme.lepton-x";
+
-import { SideMenuLayoutModule } from "@volosoft/abp.ng.theme.lepton-x/layouts";
+export const appConfig: ApplicationConfig = {
-
+  providers: [
-@NgModule({
+    // provideThemeLepton() delete this
-  // ...
+    provideSideMenuLayout(), // depends on which layout you choose
-  imports: [
+    provideThemeLeptonX(
-    // ...
+      withThemeLeptonXOptions({
-    // ThemeLeptonModule.forRoot(), -> remove this line.
+        styleFactory: styles => {
-    ThemeLeptonXModule.forRoot(),
+          return styles;
-    SideMenuLayoutModule.forRoot(), // depends on which layout you choose
+        },
-    // ...
+        themeOptions: {
+          localStorageKey: 'lpx-theme',
+          styleFactory: styles => {
+            return styles;
+          },
+        },
+      })
+    ),
   ],
-  // ...
+};
-})
-export class AppModule {}
 ```
 
-If you want to use the **`Top Menu`** instead of the **`Side Menu`**, add TopMenuLayoutModule as below,and [this style imports](https://docs.abp.io/en/abp/7.4/UI/Angular/Theme-Configurations#lepton-x-commercial)
+If you want to use the **`Top Menu`** instead of the **`Side Menu`**, add `provideTopMenuLayout` as below,and [this style imports](https://docs.abp.io/en/abp/7.4/UI/Angular/Theme-Configurations#lepton-x-commercial)
 
 ```ts
-import {
+import { provideThemeLeptonX, withThemeLeptonXOptions } from '@volosoft/abp.ng.theme.lepton-x';
-  HttpErrorComponent,
+import { provideTopMenuLayout } from '@volosoft/abp.ng.theme.lepton-x/layouts';
-  ThemeLeptonXModule,
+
-} from "@volosoft/abp.ng.theme.lepton-x";
+export const appConfig: ApplicationConfig = {
-import { TopMenuLayoutModule } from "@volosoft/abp.ng.theme.lepton-x/layouts";
+  providers: [
-
+    provideTopMenuLayout(),
-@NgModule({
+    provideThemeLeptonX(
-  // ...
+      withThemeLeptonXOptions({
-  imports: [
+        styleFactory: styles => {
-    // ...
+          return styles;
-    // ThemeLeptonModule.forRoot(), -> remove this line.
+        },
-    ThemeLeptonXModule.forRoot(),
+        themeOptions: {
-    TopMenuLayoutModule.forRoot(),
+          localStorageKey: 'lpx-theme',
+          styleFactory: styles => {
+            return styles;
+          },
+        },
+      })
+    ),
   ],
-  // ...
+};
-})
-export class AppModule {}
 ```
 
 - 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: