Hello,
I want to remove some theme options under the Appearance part that is in the side bar. Specifically, I want to remove all options except Light. I have managed to remove all options except System. What should I do?
Configure<LeptonXThemeOptions>(options =>
{
options.DefaultStyle = LeptonXStyleNames.Light;
options.Styles.Remove(LeptonXStyleNames.Dark);
options.Styles.Remove(LeptonXStyleNames.Dim);
options.Styles.Remove(LeptonXStyleNames.System);
});
import { LPX_THEMES, LPX_THEME_STYLES_DEFAULTS, lightTheme } from '@volosoft/ngx-lepton-x';
// LPX_THEME_STYLES_DEFAULTS list does not have the System option.
const lightOnlyThemes = LPX_THEME_STYLES_DEFAULTS
.filter(theme => theme === lightTheme)
.map(theme => ({ ...theme, defaultTheme: true }));
export const appConfig: ApplicationConfig = {
providers: [
importProvidersFrom(
...
ThemeLeptonXModule.forRoot({
defaultTheme: 'light'
}),
...
),
{
provide: LPX_THEMES,
useValue: lightOnlyThemes
},
...
]
};
Thank you.
2 Answer(s)
-
0
In Angular LeptonX, the “System” option you still see under Appearance is not coming from
LPX_THEME_STYLES_DEFAULTS(as you noticed). It is added by the theme’s style registry / appearance component logic, so removing it fromLeptonXThemeOptions(server-side) or filteringLPX_THEME_STYLES_DEFAULTS(client-side) is not sufficient by itself.The reliable way to keep only Light is:
- Force Light at runtime (so System can’t take effect), and
- Replace/hide the Appearance style switcher UI (since the built-in UI will still offer “System”).
1) Force Light style at runtime (Angular)
Put this in your
app.component.ts(or an app initializer) so the selected style is always Light:import { Component } from '@angular/core'; import { ThemeService, StyleNames, lightTheme } from '@volosoft/ngx-lepton-x'; @Component({ selector: 'app-root', template: '<abp-dynamic-layout />', }) export class AppComponent { constructor(private themeService: ThemeService) { if (this.themeService.selectedStyle?.styleName !== StyleNames.Light) { this.themeService.setTheme(lightTheme); } } }This matches an accepted solution from ABP support content and prevents “System” from being applied based on OS/browser preference.
2) Remove “Appearance” options from the UI (Angular)
Since “System” is injected by the UI layer, you need to override/replace the related LeptonX component that renders the appearance options (or hide it via a component replacement). In LeptonX Angular, this is done via ABP’s
ReplaceableComponentsService(the mechanism is referenced in ABP’s LeptonX customization guidance). Practically:- Create your own component that does not render the style list (or renders only Light / nothing).
- Register it with
ReplaceableComponentsServiceusing the appropriate LeptonX component key.
(There isn’t a verified, official doc snippet in the available context that names the exact “Appearance” component key for Angular; so the definitive, verified approach is: force Light + replace that UI component via
ReplaceableComponentsService.)Notes on your current code
- Your backend
Configure<LeptonXThemeOptions>snippet is correct for MVC/Blazor theme option control, but Angular’s selectable list is client-driven, so it won’t fully control what the Angular Appearance UI shows. - Your
LPX_THEMESprovider override is fine, but it won’t remove the “System” entry if it’s not sourced fromLPX_THEME_STYLES_DEFAULTS.
Sources
- https://abp.io/support/questions/5566 ✅
- https://abp.io/docs/latest/ui-themes/lepton-x/mvc ✅
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
Hi,
The
Systemoption is not inLPX_THEMES. The theme service adds it on its own, so filtering the list doesn't remove it. You can turn it off withdisableSystemOption:ThemeLeptonXModule.forRoot({ defaultTheme: 'light', themeOptions: { localStorageKey: 'LPX_THEME', disableSystemOption: true, }, }),Keep your
LPX_THEMESprovider as it is.localStorageKeyis required when you passthemeOptions, andLPX_THEMEis its default value.Thanks
Markdown supported.Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
