Open Closed

How can I apply a custom theme to the Angular UI? #506


User avatar
0
GregB created

Check the docs before asking a question: https://docs.abp.io/en/commercial/latest/ Check the samples, to see the basic tasks: https://docs.abp.io/en/commercial/latest/samples/index The exact solution to your question may have been answered before, please use the search on the homepage.

  • ABP Framework version: v3.2.1
  • UI type: Angular
  • Tiered (MVC) or Identity Server Seperated (Angular): Tiered
  • Exception message and stack trace: N/A
  • Steps to reproduce the issue:

How can I add a custom theme to an ABP app using Angular UI?

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

5 Answer(s)
  • User Avatar
    0
    armanozak created

    Hi,

    Is it the Lepton themes you are asking about?

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    GregB created

    Hi @arnanozak.

    No, I'd like to integrate another theme. The specific theme is not really important, it might be a custom theme or something bought from Theme Forrest (or similar). How do I include CSS and JS for another theme and how to I alter the HTML structure of the various components as needed by the theme.

    Another way of thinking about it is how do I build an alternative to the Lepton theme?

    Thanks

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    armanozak created

    Hi,

    You cannot alter the HTML structure of built-in components, but they are Bootstrap compliant. There is nothing specific to Lepton theme in the HTML.

    In addition, a limited number of components are replaceable: https://docs.abp.io/en/abp/latest/UI/Angular/Component-Replacement

    Including CSS and JS files is described here: https://angular.io/guide/workspace-config#style-script-config

    Please let me know if this answers your question.

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    GregB created

    (I've removed my last response as it was incorrect).

    I think this information answers my question for now.

    Thanks @armanozak

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    bilal@mastery365.ca created

    So we cannot change the behavoiur/location of menu e.g If we want to move the meu from top to left in community version of abp?

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
Boost Your Development
ABP Live Training
Packages
See Trainings
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book
Made with ❤️ on ABP v10.8.0-preview. Updated on September 16, 2026, 14:50
1
ABP Assistant
🔐 You need to be logged in to use the chatbot. Please log in first.