Theming & Color Modes

AdminLTE for ASP.NET Core supports Bootstrap 5.3 light / dark / auto color modes with no flash of the wrong theme, plus a dark or light sidebar — all driven from configuration and persisted to localStorage.

Light, dark and auto

The color mode is one of three values — light, dark or auto (follow the OS prefers-color-scheme). The active mode is written to the document's data-bs-theme attribute, which Bootstrap 5.3 and AdminLTE both honor.

Set the initial mode with the DefaultColorMode option (auto by default):

"AdminLte": {
  "DefaultColorMode": "auto"
}

No flash of the wrong theme

<AdminLteStyles /> emits a tiny blocking inline script in the <head> that reads the saved preference and sets data-bs-theme before first paint. The relevant logic:

<script>
    (function () {
        try {
            var m = localStorage.getItem('lte-theme') || 'auto';
            var dark = m === 'dark' || (m === 'auto' && window.matchMedia &&
                window.matchMedia('(prefers-color-scheme: dark)').matches);
            document.documentElement.setAttribute('data-bs-theme', dark ? 'dark' : 'light');
        } catch (e) { }
    })();
</script>

The preference is stored under the localStorage key lte-theme as light, dark or auto.

ColorModeToggle

The topbar light/dark/auto dropdown is the ColorModeToggle component. It is included automatically in DashboardLayout when the ColorModeToggle option is true. Internally it uses the scoped ColorModeService, which:

  • reads the persisted preference once the circuit becomes interactive (InitializeAsync);
  • applies and persists a new selection via SetAsync(ColorMode mode), writing data-bs-theme and the lte-theme key through the bundled adminlte-theme.js interop module;
  • raises a Changed event so the toggle re-renders its active state.

The three modes map to icons: light = bi-sun-fill, dark = bi-moon-fill, auto = bi-circle-half.

To toggle the theme from your own code, inject the service: @inject ColorModeService ColorModeSvc then call await ColorModeSvc.SetAsync(ColorMode.Dark).

Sidebar theme

The sidebar has its own independent theme via the SidebarTheme option (dark or light). It is applied as a data-bs-theme attribute on the <aside class="app-sidebar"> element, so a dark sidebar can sit alongside a light content area and vice versa.

"AdminLte": {
  "SidebarTheme": "dark"
}

Customizing CSS

The bundled stylesheets are Bootstrap 5.3 + AdminLTE 4, both of which are driven by CSS custom properties. To customize colors, add your own stylesheet after <AdminLteStyles /> and override the relevant variables or component classes:

<AdminLteStyles />
<link rel="stylesheet" href="@Assets["app.css"]" />

Because theming is CSS-variable based, most palette changes can be made by overriding Bootstrap's --bs-* custom properties (for example --bs-primary) scoped to :root or to [data-bs-theme="dark"] for dark-mode-specific tweaks.

AdminLTE 4 · ASP.NET port Edit on GitHub