Seeking Guidance: Best Approach to Integrate Metronic Theme with ABP.io #9143

toptisdev3 created 10 days ago

Hello folks,

I hope you're having a splendid day!

I'm reaching out to seek your guidance as we prepare to refactor our enterprise-scale project, currently built with ABP.io and the LeptonX theme. The application is fully functional, but we've decided to initiate a significant overhaul—primarily focusing on the front end—which brings us to this point.

After evaluating various options, we've found that we really like the design and features of the Metronic theme. We've also discovered that Metronic now offers a Blazor-compatible version, which you can view here: Metronic Blazor Preview.

Our dilemma lies in deciding the best integration approach. We are currently considering the following options:

1- Start with a blank ABP project and fully integrate the Metronic theme, essentially moving away from LeptonX and potentially losing some ABP front-end features provided by the LeptonX integration.

2- Clone the ABP Simple theme and override its styles and layouts with Metronic, which might allow us to retain some essential ABP front-end features while still adopting Metronic's design.

3- Keep the current ABP + LeptonX setup, and layer Metronic on top, overriding LeptonX with Metronic’s styles and components.

We've spent a fair amount of time exploring each of these routes but haven’t been able to confidently choose the one that best suits our needs. We felt it would be most effective to consult with the experts—and who better than the ABP support team for this?

Also, if you believe there’s a more viable or best-practice approach beyond these three options that we may have overlooked, we would be very grateful if you could share it with us.

We’d greatly appreciate your insights on which approach might be most efficient and sustainable, along with any tips or considerations you recommend as we move forward with this refactor.

Looking forward to hearing from you soon.

Warm regards, Mansour

EngincanV created 10 days ago

Support Team .NET Developer

Hi, first of all, sorry for the late response, and thanks for the detailed explanation.

All 3 options can be the way to go, but our suggestion is to add the Basic Theme Source Code into your solution and then customize it according to your needs. Here is our documentation to briefly explain that: https://abp.io/docs/latest/framework/ui/blazor/theming?UI=Blazor#implementing-a-theme

Since our Basic Theme is built with Bootstrap 5 and Metronic Theme is also Bootstrap-based, pages that come from our modules should be used without having any trouble.

Also, there are some community articles and videos that demonstrate how to use another theme rather than LeptonX Theme ( - not for Metronic Theme but MudBlazor - (but the steps are similar)):

https://abp.io/community/videos/customize-abp-blazor-application-ui-with-mudblazor-wscmpu3w
https://abp.io/community/articles/mudblazor-theme-in-abp-blazor-webassembly-ae23zz17

You can always check these contents for reference sources.

You can start with the basic theme and try to implement the Metronic Theme. If you face with an issue, feel free to write here or create a new question.

Regards.

toptisdev3 created 9 days ago

Hello EngincanV,

Thank you for getting back to us. We had also been considering the approach of adding the Basic Theme source code and customizing it, so it’s reassuring to hear your suggestion aligns with our initial direction.

Before we move forward with the refactoring process, I’d appreciate it if you could help clarify a few points to ensure we’re proceeding with confidence. Here are our follow-up questions:

Sidebar Menu and Toolbar Support: Our project is essentially an admin panel with features and menus that vary based on the user type. We’re currently using a layout that includes a sidebar menu and a toolbar, both of which are essential and must remain intact. If we proceed with the Basic Theme, will it support customizing or overriding these elements (SidebarMenu, Toolbar, etc.)? Or would we need to consider using Lepton Lite instead—so we can keep things open-source while also preserving those layout capabilities?

Reusability and Upgrade Compatibility: We plan to develop a custom theme (based on either the Basic Theme or Lepton Lite) by overriding styles and components, and then package it for reuse across multiple projects—much like how LeptonX is structured. Once created, will this custom package remain compatible with future updates to .NET, ABP, or the base theme it’s derived from? Or should we expect to manually modify and update the package each time a new version is released?

We hope your insights on these questions will help us move ahead with a clearer picture and greater confidence in our next steps.

Thanks again for your continuous support and guidance!

Best regards, Mansour

EngincanV created 9 days ago

Support Team .NET Developer

Hi,

Q1/ Sidebar Menu and Toolbar Support: Our project is essentially an admin panel with features and menus that vary based on the user type. We’re currently using a layout that includes a sidebar menu and a toolbar, both of which are essential and must remain intact. If we proceed with the Basic Theme, will it support customizing or overriding these elements (SidebarMenu, Toolbar, etc.)? Or would we need to consider using Lepton Lite instead—so we can keep things open-source while also preserving those layout capabilities?

Here are the layout parts of Basic Theme:

These parts are implemented for all of our supported themes and the only difference is the placement. If the placement is important for you, then you can continue with LeptonX Lite. Also, if you want to go with a side-bar menu, then yes it can be better to go with LeptonX Lite.

Q2 / Reusability and Upgrade Compatibility: Once created, will this custom package remain compatible with future updates to .NET, ABP, or the base theme it’s derived from? Or should we expect to manually modify and update the package each time a new version is released?

When you implement a layout or theme, unfortunately, you are on your own (we are always here for support, but I mean responsibility is on your shoulders). Since the related places are overridden, ABP's version upgrade might not work for you and you may need to manually update ABP's components (if needed). However, our themes are mature, so that means we are not making frequent changes to them, so this should not impact you for most of the time.