In this code snippet, we create a new instance of the LpxTheme class called myNewThemeDefinition. We specify the bundles that make up the theme (e.g., "bootstrap-custom" and "custom-theme"), the style name for the theme, a label to display in the UI, and an icon (using Bootstrap icons in this example).
### Step 2: Registering the New Theme Provider
Now that we have defined the new theme appearance, we need to register it as a provider in our Angular project. Open the app.module.ts file (or the module where LeptonX is configured), and add the following code:
Now that we have defined the new theme appearance, we need to register it as a provider in our Angular project. Open the `app.config.ts` file (or the configuration where LeptonX is configured), and add the following code:
```js
import { NEW_THEME_PROVIDER } from './new-theme.provider.ts';
@NgModule({
imports: [
// ...
],
export const appConfig: ApplicationConfig = {
providers: [
// ...
NEW_THEME_PROVIDER,
NEW_THEME_PROVIDER
],
// ...
})
export class AppModule { }
};
```
By importing the `NEW_THEME_PROVIDER` from the file where we defined our theme, we can add it to the providers array of our Angular module. This makes the new theme appearance available throughout the application.
By importing the `NEW_THEME_PROVIDER` from the file where we defined our theme, we can add it to the providers array of our Angular application configuration. This makes the new theme appearance available throughout the application.
### Step 3: Adding the Styles Path to angular.json
The LeptonX theme offers multiple appearances to suit your application's visual style. You can easily configure the default theme for your application using the ThemeLeptonXModule provided by LeptonX.
The LeptonX theme offers multiple appearances to suit your application's visual style. You can easily configure the default theme for your application using the `provideThemeLeptonX` provided by LeptonX.
### Configuration Code
To set the default theme, you need to configure the ThemeLeptonXModule using the forRoot() function in your application's main module (often referred to as AppModule). Here's an example:
To set the default theme, you need to configure the `provideThemeLeptonX` using the `withThemeLeptonXOptions({...})` function in the main configuration of your application (often referred to as appConfig). Here's an example:
```js
import { ThemeLeptonXModule } from 'leptonx'; // Import the LeptonX theme module
import { provideThemeLeptonX, withThemeLeptonXOptions } from '@volosoft/abp.ng.theme.lepton-x';
@NgModule({
// ... Other module configurations
imports: [
// ... Other imported modules
ThemeLeptonXModule.forRoot({
defaultTheme: 'light', // Set the default theme to 'light'
}),
export const appConfig: ApplicationConfig = {
providers: [
// ...
provideThemeLeptonX(
withThemeLeptonXOptions({
styleFactory: styles => {
return styles;
},
themeOptions: {
localStorageKey: 'lpx-theme',
styleFactory: styles => {
return styles;
},
},
defaultTheme: 'light'
})
),
],
bootstrap: [AppComponent],
})
export class AppModule {}
};
```
In the example above, we've imported the ThemeLeptonXModule and configured it using the forRoot() function. By providing the defaultTheme parameter and setting its value to 'light',
In the example above, we've imported the `provideThemeLeptonX` and `withThemeLeptonXOptions`, then configured it using the option parameters. By providing the `defaultTheme` parameter and setting its value to 'light',
If you delete the defaultTheme parameter in the configuration object, the LeptonX theme will use the default value of "System" as the default theme appearance.
@ -12,19 +12,28 @@ You may want to change certain aspects of your website’s appearance with a cu
## Adding Custom Style
There is a `customStyle` boolean configuration in `ThemeLeptonModule`'s `forRoot` method. If this configuration is true, the style selection box is not included in the theme settings form and `ThemeLeptonModule` does not load its own styles. In this case, a custom style file must be added to the styles array in `angular.json` or must be imported by `style.scss`.
There is a `customStyle` boolean configuration in `provideThemeLepton(withLeptonOptions({...}))` method. If this configuration is true, the style selection box is not included in the theme settings form and `theme-lepton` does not load its own styles. In this case, a custom style file must be added to the styles array in `angular.json` or must be imported by `style.scss`.
> Only angular project styles can be changed in this way. If the authorization flow is authorization code flow, MVC pages (login, profile, etc) are not affected by this change.
Custom style implementation can be done with the following steps
Set `customStyle` property to `true` where is `ThemeLeptonModule` imported with `forRoot` method.
Set `customStyle` property to `true` where `provideThemeLepton(withLeptonOptions({...}))` method is called.
```javascript
// app.module.ts
ThemeLeptonModule.forRoot({
customStyle: true
})
// app.config.ts
import { provideThemeLepton, withOptions as withLeptonOptions } from '@volo/abp.ng.theme.lepton';
export const appConfig: ApplicationConfig = {
providers: [
// ...
provideThemeLepton(
withLeptonOptions({
customStyle: true
})
)
],
};
```
Import your style file to `src/style.scss`
@ -68,7 +77,7 @@ Or add your style file to the `styles` arrays which in `angular.json` file
## Inserting Custom Content To Lepton Menu
Lepton menu can take custom content both before and after the menu items displayed. In order to achieve this, pass a component as content through the parameters of `ThemeLeptonModule.forRoot` when you import the module in your root module, i.e. `AppModule`. Let's take a look at some examples.
Lepton menu can take custom content both before and after the menu items displayed. In order to achieve this, pass a component as content through the parameters of `provideThemeLepton(withLeptonOptions({...}))` when you import the provider in your root app configuration, i.e. `appConfig`. Let's take a look at some examples.
### Placing Custom Content Before & After Menu Items
@ -76,7 +85,10 @@ Lepton menu can take custom content both before and after the menu items display
First step is to create a component which will serve as the custom content.
@ -88,27 +100,23 @@ First step is to create a component which will serve as the custom content.
export class SupportLinkComponent {
issueCount$ = of(26); // dummy count, replace this with an actual service
}
@NgModule({
declarations: [SupportLinkComponent],
imports: [CommonModule],
})
export class SupportLinkModule {}
```
Now, pass this component as `contentAfterRoutes` option to `ThemeLeptonModule`.
Now, pass this component as `contentAfterRoutes` option to `provideThemeLepton(withLeptonOptions({...}))`.
```js
@NgModule({
imports: [
// other imports are removed for sake of brevity
SupportLinkModule,
ThemeLeptonModule.forRoot({
contentAfterRoutes: [SupportLinkComponent],
})
import { provideThemeLepton, withOptions as withLeptonOptions } from '@volo/abp.ng.theme.lepton';
export const appConfig: ApplicationConfig = {
providers: [
// ...
provideThemeLepton(
withLeptonOptions({
contentAfterRoutes: [SupportLinkComponent],
})
)
],
})
export class AppModule {}
};
```
If you start the dev server, you must see the inserted content as follows:
@ -124,24 +132,25 @@ Placing the content before menu items is straightforward: Just replace `contentA
### Placing a Search Input Before Menu Items
The Lepton package has a search component designed to work with the routes in the menu. You can simply import the module and pass the component as `contentBeforeRoutes` option to `ThemeLeptonModule`.
The Lepton package has a search component designed to work with the routes in the menu. You can simply import the provider and pass the component as `contentBeforeRoutes` option to `provideThemeLepton(withLeptonOptions({...}))`.
```js
import { MenuSearchComponent, MenuSearchModule } from '@volo/abp.ng.theme.lepton/extensions';
@NgModule({
imports: [
// other imports are removed for sake of brevity
MenuSearchModule.forRoot({
import { provideThemeLepton, withOptions as withLeptonOptions } from '@volo/abp.ng.theme.lepton';
import { MenuSearchComponent, provideMenuSearch } from '@volo/abp.ng.theme.lepton/extensions';
export const appConfig: ApplicationConfig = {
providers: [
// ...
provideThemeLepton(
withLeptonOptions({
contentBeforeRoutes: [MenuSearchComponent],
})
),
provideMenuSearch({
limit: 3 // search result limit (default: Infinity)
sumeyye
1 year ago