How to add custom theme in lepton x angular project #5373

5 Answer(s)

• 

  0

  mahmut.gundogdu created one year ago

  There is a provider for replacing the theme items whose name is LPX_THEMES.

  https://gist.github.com/mahmut-gundogdu/b930a9bdca07809077478747e01b5eb9.

  if you want to create a new css file on lepton x theme. you should follow the docs. https://docs.abp.io/en/commercial/latest/themes/lepton-x/source-files#adding-new-theme-bundle-to-source-file

  bundle names must match with angular.json.

     {
                  "input": "src/css/my-filename.css",
                  "inject": false,
                  "bundleName": "my-bundle-bundle" // <--- that is the name in the code.
                },
  

  Save Cancel
• 

  0

  bhasinp created one year ago

  Hi Team,

  Thanks, This works as expected.

  Save Cancel
• 

  0

  bhasinp created one year ago

  Hi Team,

  One more question on this.

  how can I reorder the position of themes Suppose I need the theme in following order

  1. Custom Theme
  2. Light
  3. Dark
  4. Dim
  5. System

  Thanks

  Save Cancel
• 

  0

  bhasinp created one year ago

  Hi Team any update on this ?

  Save Cancel
• 

  0

  mahmut.gundogdu created one year ago

  Hi Team,

  One more question on this.

  how can I reorder the position of themes
  Suppose I need the theme in following order

  1. Custom Theme
  2. Light
  3. Dark
  4. Dim
  5. System

  Thanks

  
  export const NEW_THEME_PROVIDER = [
    {
      provide: LPX_THEMES,
      useValue: [...LPX_THEME_STYLES_DEFAULTS, myNewThemeDefinition], // <- Change your order in there
    },
  ];
  
  // for example [myNewThemeDefinition,...LPX_THEME_STYLES_DEFAULTS ]
  //or  [...[...LPX_THEME_STYLES_DEFAULTS, myNewThemeDefinition].reverse()]
  

  Save Cancel