Is there a way disable dark theme? I have removed the dark/light theme swtich and set up the light theme as default, however, when I was testing the project locally, it shows in dark theme, is there a way to force the app to use light theme only?
11 Answer(s)
-
0
- Solution To force Light theme only (disable Dark) in an MVC app that uses LeptonX/LeptonX Lite (ABP v9.3):
- Set the default style to Light on the server (so initial render is Light)
- In your Web module (e.g., YourProject.WebModule), configure LeptonX theme options:
using Volo.Abp.Ui.Branding; using Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonXLite; // or LeptonX, depending on your package using Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonXLite.Bundling; // if using LeptonX Lite bundles using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared; public override void ConfigureServices(ServiceConfigurationContext context) { Configure<LeptonXThemeOptions>(options => { // Forces default style to Light options.DefaultStyle = LeptonXThemeStyle.Light; }); // Optional: if you have per-user style/cookie preferences lingering from development, // you can disable reading from user settings to avoid OS/system overrides: Configure<LeptonXThemeUiOptions>(ui => { ui.AllowStyleSelectionFromClient = false; }); }Remove or hide the client-side theme switcher
- If you have a toolbar item/view component or script that toggles theme, remove it from the toolbar contributors and layout.
- Ensure you don’t include any JS that calls ThemeService/setTheme (for Angular) or injects a body class to switch styles on the client.
Clear persisted client preference so testing doesn’t revert to Dark
- LeptonX may remember the last selected style via local storage or cookies. Clear browser storage/cookies and test in a private/incognito window to confirm the forced Light style takes effect.
Prevent system/OS dark preference from applying
- Ensure your layout doesn’t include scripts that auto-select “System” style or apply [prefers-color-scheme: dark] behavior.
- With AllowStyleSelectionFromClient = false and DefaultStyle = Light, the server will always render Light and the client won’t override it.
If you still see dark colors, verify CSS order
- Make sure no custom CSS/JS or additional theme bundles re-apply dark classes after render.
- Check that only the Light variant of LeptonX CSS is being applied at runtime (remove any dynamic theme-loader scripts if you added them manually).
Code-only minimal variant:
public override void ConfigureServices(ServiceConfigurationContext context) { Configure<LeptonXThemeOptions>(options => { options.DefaultStyle = LeptonXThemeStyle.Light; }); Configure<LeptonXThemeUiOptions>(ui => { ui.AllowStyleSelectionFromClient = false; }); }- Sources
- LeptonX Lite Theme overview:
- https://abp.io/docs/latest/ui-themes/lepton-x-lite/
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.
-
0
are you sure? I got this Cannot resolve symbol 'LeptonXThemeUiOptions'
-
0
hi
You can try to override the
GetSelectedStyleAsyncmethod ofILeptonXStyleProviderservice always to returnLeptonXStyleNames.Light?public override Task<string> GetSelectedStyleAsync() { return Task.FromResult(LeptonXStyleNames.Light); }Thanks.
-
0
how to implement other functions?
namespace Tapp.Web;
public class TappLeptonXStyleProvider : ILeptonXStyleProvider { public Task<string> GetSelectedStyleAsync() { return Task.FromResult(LeptonXStyleNames.Light); }
public Task<LeptonXSideMenuState> GetSideMenuStateAsync() { return Task.FromResult(LeptonXSideMenuState.Expanded); } public Task<bool> GetSideMenuStateAsync() { throw new System.NotImplementedException(); }}
-
0
hi
Please inherit the
LeptonXStyleProviderbase class.Thanks.
-
0
is there a doc for this LeptonXStyleProvider? I couldn't find one and I found this support ticket https://abp.io/support/questions/5295/Tenant-specific-themes
-
0
- Solution You’re right: there is no public “LeptonXThemeUiOptions” for MVC. The supported, documented way to hard‑force Light (and avoid client/OS overrides) on LeptonX MVC is to override the style provider.
Implement a custom provider by inheriting the built-in LeptonXStyleProvider and override only what you need (SelectedStyle, Side menu, etc.). Then register it as the ILeptonXStyleProvider.
Example (MVC, ABP v9.x):
using System.Threading.Tasks; using Microsoft.Extensions.Options; using Volo.Abp.DependencyInjection; using Volo.Abp.Ui.LeptonX; using Volo.Abp.Ui.LeptonX.Theming; namespace Tapp.Web; // Inherit the base provider to avoid re-implementing unrelated members public class TappLeptonXStyleProvider : LeptonXStyleProvider, ITransientDependency { public TappLeptonXStyleProvider(IOptions<LeptonXThemeOptions> options) : base(options) { } // Force Light theme always public override Task<string> GetSelectedStyleAsync() { return Task.FromResult(LeptonXStyleNames.Light); } // Optional: keep menu expanded (example) public override Task<LeptonXSideMenuState> GetSideMenuStateAsync() { return Task.FromResult(LeptonXSideMenuState.Expanded); } }Register it in your WebModule so it replaces the default provider:
using Microsoft.Extensions.DependencyInjection; using Volo.Abp.Modularity; using Volo.Abp.Ui.LeptonX.Theming; [DependsOn(typeof(AbpAspNetCoreMvcUiLeptonXThemeModule))] // ensure LeptonX MVC module is depended public class TappWebModule : AbpModule { public override void ConfigureServices(ServiceConfigurationContext context) { context.Services.AddTransient<ILeptonXStyleProvider, TappLeptonXStyleProvider>(); } }Notes:
- Inheriting LeptonXStyleProvider ensures you don’t have to guess other members or future additions; you only override what you need. This is exactly why you saw “Please inherit the LeptonXStyleProvider base class.”
- Clear browser storage/cookies or test in a private window if you previously switched to dark; client persistence can trick you during tests.
- If you’ve added any toolbar/theme-switch UI, remove it so the client can’t toggle styles.
- Sources
- LeptonX Theme (overview and customization entry points):
- https://abp.io/docs/latest/ui-themes/lepton-x
- LeptonX MVC customization (entry page):
- https://abp.io/docs/latest/ui-themes/lepton-x/mvc
- Related support discussion (tenant-specific themes; mentions style provider customization path):
- https://abp.io/support/questions/5295/Tenant-specific-themes
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.
-
0
[maliming] said: hi
Please inherit the
LeptonXStyleProviderbase class.Thanks.
hi, is there a doc for this LeptonXStyleProvider? I couldn't find one and I found this support ticket https://abp.io/support/questions/5295/Tenant-specific-themes
-
0
hi
It is a built-in service. Will get the current dark/light from the request cookies. Usually, you don't need to change it.
Thanks.
-
0
but how can I use it here, or can you give me the full file? can't find the namespaces
*You can try to override the GetSelectedStyleAsync method of ILeptonXStyleProvider service always to return LeptonXStyleNames.Light?
public override Task<string> GetSelectedStyleAsync() { return Task.FromResult(LeptonXStyleNames.Light); } Thanks.*
-
0
hi
[Dependency(ReplaceServices = true)] [ExposeServices(typeof(ILeptonXStyleProvider))] public class MyLeptonXStyleProvider : LeptonXStyleProvider { public MyLeptonXStyleProvider(IHttpContextAccessor httpContextAccessor, IOptions<LeptonXThemeOptions> leptonXThemeOption) : base(httpContextAccessor, leptonXThemeOption) { } public override Task<string> GetSelectedStyleAsync() { return Task.FromResult(LeptonXStyleNames.Light); } }
