We find that the basic theme is REALLY basic as the name implies. LeptonX on the other hand feel kind of bloated, very opinionated and based on our our experience, very hard to customize besides very basic CSS stuff. What you see is what you get and if you are not happy with that you are kind of out of luck and have to roll your own
Any plans for a new modern lightweight but easily customizable theme that also works well in mobile view and with Expo / React Native? Any alternatives to the ABP ones?
12 Answer(s)
-
0
- Solution
- Today, ABP provides two official web themes:
- Basic Theme: intentionally minimal.
- LeptonX Theme: full-featured and opinionated.
- There is no official announcement of a new, modern, lightweight theme beyond these. When you need something leaner than LeptonX but richer than Basic, ABP recommends either:
- Customizing LeptonX via CSS variables and bundling overrides, or
- Building your own theme package (Angular/Blazor) using Bootstrap and ABP’s theming/bundling infrastructure.
Practical options and how to proceed:
- If you stay on ABP’s web stack:
- For Blazor/MVC:
- Add a custom CSS file after the theme bundle to override variables (brand, primary/secondary, etc.), and register it with AbpBundlingOptions.
- Example:
- For Blazor/MVC:
Configure<AbpBundlingOptions>(options => { options.StyleBundles.Configure(BlazorLeptonXThemeBundles.Styles.Global, bundle => { bundle.AddFiles("/css/custom-leptonx-overrides.css"); }); });Then, in custom-leptonx-overrides.css::root { --lpx-brand: #4f46e5; --lpx-primary: #4f46e5; --bs-primary: #4f46e5; } [data-bs-theme="dark"] { --lpx-brand: #8b5cf6; }For Angular:
- Create a new Angular theme package or override styles in a global stylesheet loaded after the theme CSS. You can examine the Theme Basic package structure to replicate the minimal setup and keep it lightweight.
Mobile (Expo/React Native):
- ABP’s React Native option is available in Commercial (Team or higher). It’s a separate mobile template and not tied to web themes (LeptonX/Basic do not apply to React Native). For RN/Expo, you style at the component level or use a design system (e.g., NativeBase/React Native Paper/Tamagui). You consume ABP backend APIs with the provided auth/integration, but UI theming is independent of ABP web themes.
Alternatives to ABP themes:
- Web: You can replace Basic/LeptonX with your own Bootstrap-based or Tailwind-based theme. ABP UI packages largely rely on Bootstrap class semantics, so Bootstrap-compatible themes are easiest. Tailwind can work, but you’ll need to ensure compatibility and adjust components/layouts.
- Mobile: Use any React Native UI library; ABP does not constrain RN theming.
Guidance when building your own theme:
- Angular: Review Theme Basic to understand layout tokens (Application/Account/Empty Layouts), routing outlets, and how ABP modules assume Bootstrap classes. Implement only the pieces you need to stay lightweight.
- Blazor/MVC: Use ABP bundling to register your CSS/JS. Keep the layout razor pages/components minimal and piggyback on Bootstrap.
- Sources
- Validated: Basic Theme overview
- https://abp.io/docs/latest/themes/basic
- Validated: ABP React Native getting started (Commercial; mobile UI theming is separate from web themes)
- https://abp.io/docs/latest/framework/ui/react-native/
- Validated: Community guidance on replacing/overriding Basic theme (illustrates bundling and CSS override approach)
- https://abp.io/community/articles/n3548bgl
- Validated: Support note on creating new Angular themes (examine Theme Basic; no official doc for creating new theme package)
- https://abp.io/support/questions/3810
- Validated: Support thread showing React Native template status and open-source template path (indicates RN theming is independent)
- https://abp.io/support/questions/2395
This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.
Markdown supported.Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post) -
0
For example, assume you what to modify the mobile navbar from this
To something like 6 bottom icons with the hamburger menu to the right and the seldom used Settings icon not forced on you (why isn't it under user profile to begin with?) and not using that bloated pink icon for the menu
AFAIK, only way to achieve something like this, which should be easily customizable, is basically to find the source code, do a lot of detective work with some trial and error and finally recompiling everything. And then you can say goodbye to any new updated without having to repete the process.
Markdown supported.Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post) -
0
Hi improwise,
Our LeptonX theme's customizable features include styles like your brand's logo, color, shadow, border radius, font, and more. Enabling customizations beyond these creates technical issues when it comes to receiving common updates.
The different layouts of our LeptonX theme (top menu, side menu, etc.) use the same single mobile layout. While this brings structural advantages, it also imposes limitations, as you mentioned.
I want you to know that we are still working on improving the customizable aspects of LeptonX to make it easier to customize in the future. In the latest version of LeptonX, as you can see in the image here, we released an update last year for users who wanted to fit more items in the mobile layout. By aligning the large pink menu icon in the center with the other elements and positioning it on the right, we've enabled you to customize and add new menus to the left of it.
Unfortunately, we don't have plans to develop a theme compatible with React Native anytime soon.Thank you for your feedback.
Markdown supported.Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post) -
0
Hi,
This is a serious and unnecessary limitation of ABP we think. Basically two out of five icons are kind wasted with a unnecessary bloated menu icon.
What is even the reasoning behind this being the standard layout? Why does Settings, something you would seldom access, considered as so important to take one out of four bottom bar icons?
Why is the menu icon so bloated compared to just a normal hamburger menu?
Markdown supported.Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post) -
0
Hi,
Thanks for the detailed feedback and for sharing the screenshots.
Based on the current ABP documentation and theme implementation, here is the current situation:
- ABP currently provides official theme options around Basic Theme, LeptonX Lite, and LeptonX Theme. The Basic Theme is intentionally minimal and is meant to be a good starting point if you want to build your own design on top of it.
- At the moment, we do not have a public roadmap item for a completely new lightweight theme separate from the current theme family. The public roadmap currently focuses on improving LeptonX (new layouts, styles, and components) and a theme builder rather than introducing a brand-new theme line.
- If your goal is a more modern but lighter option, LeptonX Lite is currently the closest official choice.
- For React Native / Expo, ABP's React Native support is a separate mobile startup template integrated with ABP backends. It is not based on the web themes, so Basic / LeptonX / LeptonX Lite do not directly apply to the React Native UI layer. We also do not currently have a public roadmap item for a dedicated React Native theme.
About the mobile navigation customization in your screenshots:
- Your concern is valid. In the current LeptonX mobile layout, items such as Settings, Profile, and the hamburger menu are part of the mobile navbar structure itself.
- Because of that, changes like removing Settings from the bottom bar, moving the menu button, or changing that mobile structure are generally not simple CSS customizations. They typically require component/layout replacement or source-level customization.
So, if your priority is lightweight + easier customization, the most practical options today are:
- Basic Theme + source customization if you want maximum control and a lighter base.
- LeptonX Lite if you want a more modern official theme with a lighter footprint than full LeptonX.
- LeptonX with component replacement/custom layout work if you want to stay with the commercial theme and customize deeper parts of the UI.
If you want, please let us know whether your project is Angular, Blazor, or MVC / Razor Pages. Then we can suggest the most maintainable customization path for your exact stack.
Best regards,
ABP Support Team
Markdown supported.Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post) -
0
Hi again,
I saw it in the internal development roadmap and plans. It's not a fully announced feature. Currently I don't have enough information for sharing any more information at the moment and it's not a mature feature currently and not clear which ABP Studio version will be affected not clear so far. You can track official roadmap and announcements.
Best regards,
ABP Support Team
Markdown supported.Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post) -
0
Hi,
Thank you ensin for another good and professional answer(s).
We will be looking into this more in detail when we have time for it.
Unless it has been done recently, I believe you need to improve documentation regarding what's what about theming and themes.
As I recall it, it is not very clear how to use LeptonX Lite in a commercial project instead of the full blown one and that there is also confusion about naming and same thing being called different things.
We find the LeptonX theme and the idea behind it a bit confusing in itself and what the intended usage really is. Like the fact that in every new project, you would have to manually spend time on overriding the "Copyright Volosoft" in the footer which for whatever reason is there out of the box even though I can't think of a single use case where one of your customers would want that in their apps. The theme also feels a bit over engineered with regards to look and feel, unless most of your customers are using ABP Commercial to create games or gambling sites which I doubt.
Related to our discussion in the React Native thread, this is another reason why we decided to create our own template instead of using the default one as we found ourselves constantly fighting with the theme for our typical LOB applications we create for our clients.
Thanks.
Markdown supported.Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post) -
1
Hello again,
A new documentation PR has just dropped. https://github.com/abpframework/abp/pull/25245
I know, it's not what you seek currently, but a new React option comes with a couple of different theme/style options. It seems it's not for existing projects, I'll try to deliver new updates whenever they're publicly available. Stay tuned!
Best regards,
ABP Support Team
Markdown supported.Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
