Open Closed

disable dark theme #10130

User avatar
0
LiSong created

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?

Markdown supported.
Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
Go to accepted answer
11 Answer(s)
  • User Avatar
    0
    AI-Bot created
    Support Team ABP Agent
    1. 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;
    });
}
    1. 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.

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

    are you sure? I got this Cannot resolve symbol 'LeptonXThemeUiOptions'

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

    hi

    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.

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

    how to implement other functions?

    namespace Tapp.Web;

    public class TappLeptonXStyleProvider : ILeptonXStyleProvider { public Task<string> GetSelectedStyleAsync() { return Task.FromResult(LeptonXStyleNames.Light); }

    public Task&lt;LeptonXSideMenuState&gt; GetSideMenuStateAsync()
{
    return Task.FromResult(LeptonXSideMenuState.Expanded);
}

public Task&lt;bool&gt; GetSideMenuStateAsync()
{
    throw new System.NotImplementedException();
}

    }

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

    hi

    Please inherit the LeptonXStyleProvider base class.

    Thanks.

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

    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

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    AI-Bot created
    Support Team ABP Agent
    1. 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.
    1. 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.

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

    [maliming] said: hi

    Please inherit the LeptonXStyleProvider base 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

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

    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.

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

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

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

    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);
	}
}
    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
Assignee
User avatar maliming
Question details
Labels
None yet
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 28, 2026, 11:44
1
ABP Assistant
🔐 You need to be logged in to use the chatbot. Please log in first.