Theming & Dark Mode

AdminLTE 4 for Django ships dark mode built on Bootstrap 5.3's data-bs-theme, a Light / Dark / Auto toggle in the topbar, configurable sidebar themes, and a themed django.contrib.admin.

The color-mode toggle

The topbar includes a Light / Dark / Auto dropdown (rendered from adminlte/partials/color-mode.html). It is wired by AdminLTE's own adminlte.js: each button carries a data-bs-theme-value, and the choice is persisted to localStorage under lte-theme — the same key shared with the Vue, React and Angular ports. Hide the toggle with:

ADMINLTE = {"color_mode_toggle": False}

Forcing a default mode

By default layout_dark_mode is None, so the rendered page respects the user's stored choice / OS preference. Set it to True to force dark mode server-side — the base template then emits data-bs-theme="dark" on <html> before the body paints, so there is no flash:

ADMINLTE = {"layout_dark_mode": True}

{# adminlte/master.html — already done for you #}
<html lang="{{ LANGUAGE_CODE|default:'en' }}"
      {% if adminlte.dark_mode %}data-bs-theme="dark"{% endif %}>

Sidebar theme

The sidebar has its own light/dark theme, independent of the page color mode:

ADMINLTE = {
    "sidebar_theme": "light",                       # dark | light
    "classes_sidebar": "bg-body-secondary shadow",  # extra sidebar classes
}

Customising colors

AdminLTE 4 is Bootstrap 5.3, so override theme colors with standard Bootstrap CSS variables — scope them to a theme when needed. Add the stylesheet via the layout's extra_css block (or your own static file):

:root {
  --bs-primary: #6610f2;
  --bs-primary-rgb: 102, 16, 242;
}
[data-bs-theme="dark"] {
  --bs-body-bg: #14181f;
}

If you use the Vite pipeline you can instead compile AdminLTE from SCSS and override variables before the @use — uncomment Option B in the generated assets/app.scss:

# assets/app.scss (installed by adminlte_install)
# $primary: #6610f2;
# @use "admin-lte/src/scss/adminlte" with ($primary: $primary);

Because the theme is set on <html> before the body paints, write your overrides for both [data-bs-theme="light"] and [data-bs-theme="dark"] so switching never produces a mismatch.

Themed Django admin

django.contrib.admin is themed with the AdminLTE 4 shell out of the box: the topbar, plus a sidebar auto-generated from your registered apps/models. It reuses the same menu builder + filter pipeline as the app sidebar, so it honours per-user view permissions and active state, and the native change-list / change-form content renders inside the shell.

Enable it by placing django_adminlte4 before django.contrib.admin in INSTALLED_APPS so its admin/* template overrides win:

INSTALLED_APPS = [
    "django_components",
    "django_adminlte4",          # must precede django.contrib.admin
    "django.contrib.admin",
    # ...
]

Customise it through the ADMINLTE dict:

Key	Purpose
`admin_enabled`	Toggle the AdminLTE skin on/off (default `True`).
`admin_brand`	Admin sidebar brand text (falls back to `logo`).
`admin_menu`	A list of menu-item dicts to replace the auto app/model menu.

The themed admin always loads the pre-built static bundle (no Node required), regardless of the front-end assets_mode you choose for the rest of the app.

AdminLTE 4 · Django port Edit on GitHub