Theming & Dark Mode

AdminLTE 4 is built on Bootstrap 5.3's data-bs-theme color modes. The package ships a Light / Dark / Auto toggle in the topbar, a configurable sidebar theme, and two paths for customizing colors: Bootstrap CSS variables, or compiling AdminLTE's SCSS from source.

Color modes (Light / Dark / Auto)

The topbar color-mode dropdown (partials/color-mode.blade.php) offers Light, Dark and Auto (system preference, the default active option). The selection is wired by the core admin-lte JS — published into your app via the resources/js/adminlte.js stub — using data-bs-theme-value buttons and data-lte-theme-icon icons. Show or hide the toggle with:

'color_mode_toggle' => true,   // config/adminlte.php

Related config keys

Key	Default	Effect
`color_mode_toggle`	`true`	Show the Light / Dark / Auto dropdown in the topbar.
`layout_dark_mode`	`null`	Force dark mode app-wide. `null` respects the system / user toggle.
`sidebar_theme`	`'dark'`	Sidebar color theme: `'dark'` adds `data-bs-theme="dark"` to the sidebar, `'light'` matches the body.
`control_sidebar_theme`	`'dark'`	Theme for the right-hand control sidebar panel.

Customizing colors with Bootstrap variables

Because AdminLTE 4 sits on Bootstrap 5.3 CSS variables, you can override theme colors with standard Bootstrap custom properties — scoped per mode where needed. Add your CSS through a per-page @push('css') stack, or globally in your published resources/css/adminlte.css:

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

Compiling AdminLTE SCSS (Option B)

For deeper changes — sidebar width, breakpoints, brand colors — compile AdminLTE from source instead of importing the prebuilt CSS. The published resources/css/adminlte.css documents both paths. Option A imports the prebuilt stylesheet; Option B compiles the SCSS so you can set variables before the import (requires sass, installed by the installer):

// resources/css/adminlte.scss
$primary: #6610f2;            // your overrides BEFORE the import
$lte-sidebar-width: 280px;
@import 'admin-lte/src/scss/adminlte';

Point your vite.config.js input at the .scss file and rebuild with npm run build.

Overriding the views

To restyle the shell itself (navbar, sidebar, footer, partials), publish the Blade views and edit them in place — Laravel resolves resources/views/vendor/adminlte before the package's copies:

php artisan vendor:publish --tag=adminlte-views
# or: php artisan adminlte:install --only=views

The default sidebar theme is dark (sidebar_theme => 'dark') regardless of the body color mode, so the sidebar stays dark even in Light mode. Set it to 'light' to have the sidebar follow the active data-bs-theme.

Because the body color mode can switch at runtime, write overrides that are valid for both [data-bs-theme="light"] and [data-bs-theme="dark"] to avoid a mismatch when users toggle.

AdminLTE 4 · Laravel port Edit on GitHub