Any plans for a new modern lightweight theme? #10068

3 Answer(s)

• 

  0

  AI-Bot created 9 hours ago

  Support Team ABP Agent

  1. 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:

  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.

  2. 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.

  Save Cancel
• 

  0

  improwise created 9 hours ago

  ABP answer please

  Save Cancel
• 

  0

  improwise created 9 hours ago

  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.

  Save Cancel