How to create my own theme? #3974

3 Answer(s)

• 

  0

  muhammedaltug created 2 years ago

  Hello,

  What is your version and what is your UI type?

  Save Cancel
• 

  0

  PedroCadevilla created 2 years ago

  Angular and the version is 6.0

  Save Cancel
• 

  0

  muhammedaltug created 2 years ago

  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 array

    import { 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 in angular.json

    {
        "input": "src/my-theme.scss",
        "inject": false,
        "bundleName": "my-theme"
    },
    {
        "input": "src/bootstrap-my-theme.scss",
        "inject": false,
        "bundleName": "bootstrap-my-theme"
    },
    

  Save Cancel