Change default theme from basic to a custom one #4053

6 Answer(s)

• 

  0

  malik.masis created 3 years ago

  Hi Tommy,

  Could you separate your questions, please?

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

  Regards

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  tommy.reynolds@pentair.com created 3 years ago

  Hi Malik,

  Sure I will do it. ...

  I changed for only one quesiton.

  Thanks

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel

  1
• 

  0

  tommy.reynolds@pentair.com created 3 years ago

  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

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  muhammedaltug created 3 years ago

  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',
      });
  

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  tommy.reynolds@pentair.com created 3 years ago

  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

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  muhammedaltug created 3 years ago

  Hello,

  Did you clear localStorage?

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel