Open Closed

How to create my own theme? #3974


User avatar
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)
  • User Avatar
    0
    muhammedaltug created

    Hello,

    What is your version and what is your UI type?

  • User Avatar
    0
    PedroCadevilla created

    Angular and the version is 6.0

  • User Avatar
    0
    muhammedaltug created

    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"
      },
      
Made with ❤️ on ABP v9.1.0-preview. Updated on November 11, 2024, 11:11