Open Closed

Change default theme from basic to a custom one #4053


User avatar
0
tommy.reynolds@pentair.com created

Hi Support team,

  1. Can you tell me which changes I should do to change or set the default theme from basic to a custom. So I can see this new theme with all global styles changes I did by default

Thanks for your hard work :)

  • ABP Framework version: 6
  • UI type: Angular
  • DB provider: EF Core

6 Answer(s)
  • User Avatar
    0
    malik.masis created

    Hi Tommy,

    Could you separate your questions, please?

    Because they are different expert questions and different people can answer them.

    Regards

  • User Avatar
    0
    tommy.reynolds@pentair.com created

    Hi Malik,

    Sure I will do it. ...

    I changed for only one quesiton.

    Thanks

  • User Avatar
    0
    tommy.reynolds@pentair.com created

    Hi Support team,

    can you help me with this question? please

    Can you tell me which changes I should do to change or set the default theme from basic to a custom. So I can see this new theme with all global styles changes I did by default

    In the first question we have the details, please

  • User Avatar
    0
    muhammedaltug created

    Hello,

    You can set defaultTheme property to true when creating an instance from LpxTheme class.

     const myTheme = new LpxTheme({
          icon: 'bi bi-sun',
          label: 'My Theme',
          defaultTheme: true, //this line sets default theme
          bundles: [
            {
              bundleName: 'dark',
            },
            {
              bundleName: 'bootstrap-dark',
            },
          ],
          styleName: 'myTheme',
        });
    
  • User Avatar
    0
    tommy.reynolds@pentair.com created

    Hi ABP Support,

    I have done this change as you can see in the code below

    export const PENTAIR_PROVIDER: Provider = { provide: LPX_THEMES, useFactory: () => { const defaults = LPX_THEME_STYLES_DEFAULTS; const pentairTheme = new LpxTheme({ icon: 'bi bi-sun', label: 'Pentair Theme', defaultTheme: true, bundles: [ { bundleName: 'pentair-theme', }, ], styleName: 'pentairTheme', }); return [...defaults, pentairTheme]; }, };

    And we call this provider in the app.module.ts

    But we can't see by default this theme when we initiate the project

    It shows the basic theme like before

    Is there any other change we have to do?

    Thanks

  • User Avatar
    0
    muhammedaltug created

    Hello,

    Did you clear localStorage?

Made with ❤️ on ABP v8.2.0-preview Updated on March 25, 2024, 15:11