0
PedroCadevilla created
I want to add a PersonalTheme to the selection of themes (dark - ligth - personal) and be able to use it from there
3 Answer(s)
-
0
Hello,
What is your version and what is your UI type?
-
0
Angular and the version is 6.0
-
0
Hello,
You can implement with following steps
Create a provider for changing Lepton-x theme style defaults
import { LPX_THEMES, LpxTheme, LPX_THEME_STYLES_DEFAULTS } from '@volosoft/ngx-lepton-x'; export const MY_THEME_PROVIDER: Provider = { provide: LPX_THEMES, useFactory: () => { const defaults = LPX_THEME_STYLES_DEFAULTS; const myTheme = new LpxTheme({ icon: 'bi bi-sun', label: 'My Theme', bundles: [ { bundleName: 'my-theme', }, { bundleName: 'bootstrap-my-theme', }, ], styleName: 'myTheme', }); return [...defaults, myTheme]; }, };
Add this provider to
AppModule
's providers arrayimport { MY_THEME_PROVIDER } from './my-theme-provider' @NgModule({ declarations: [AppComponent], imports: [ // imports ], providers: [ MY_THEME_PROVIDER, ], bootstrap: [AppComponent], }) export class AppModule {}
Add your bundles to
projects.YourProject.architect.build.options.styles
key which is inangular.json
{ "input": "src/my-theme.scss", "inject": false, "bundleName": "my-theme" }, { "input": "src/bootstrap-my-theme.scss", "inject": false, "bundleName": "bootstrap-my-theme" },