ColorlibHQ/AdminLTE v4.4.0

v4.4.0 — Extended colour palette, skins & presets, header search restyle

on GitHub

AdminLTE 4.4.0 brings the extra colours back — as a designed, opt-in palette with skins and presets — restyles the header search, and fixes the sidebar height regression from 4.3.0.

Extended colour palette (opt-in)

AdminLTE 3 had .bg-navy, .bg-teal, .bg-fuchsia and the sidebar skins baked into its CSS. v4 dropped them; 4.4.0 brings them back as a separate stylesheet, dist/css/adminlte-colors.css (≈ 5 kB gzipped). adminlte.css is byte-for-byte unchanged, so nobody pays for colours they don't load.

<link rel="stylesheet" href="css/adminlte.css">
<link rel="stylesheet" href="css/adminlte-colors.css">

Rather than copying the v3 hexes (several of which had white text below 4:1), the palette was generated in OKLCH: fourteen colours — orange, amber, olive, teal, sky (the old lightblue), indigo, violet, fuchsia, pink, and the chrome neutrals navy, steel, slate, graphite, midnight. Every one takes white text at ≥ 4.6:1, hues sit in the gaps between Bootstrap's theme colours so they mix cleanly with primary/success/…, and the neutrals sit at the lightness steps popular admin kits use for their sidebars. npm run palette -- --check and a unit test hold it to those rules.

Each colour gets the full set: --bs-* tokens (with dark-mode subtle/emphasis variants), .bg-*, .text-bg-*, .text-*, .border-*, .link-*, .bg-gradient-* (also for the eight theme colours, as in v3), .card-* / .card-outline, .callout-*, .direct-chat-*, and a hover shade for .btn.bg-*.

Skins are just text-bg-* + data-bs-theme on the sidebar and header — no CSS of their own:

<nav class="app-header navbar navbar-expand text-bg-sky" data-bs-theme="dark">…</nav>
<aside class="app-sidebar text-bg-navy shadow" data-bs-theme="dark">…</aside>

There are 17 presets in four families — light, semi-dark, full dark, coloured & gradient — each with a layout thumbnail, plus four dashboard sets (which four colours to put on a widget row, chosen by hue relationship). Your own brand colour is one line of Sass, $lte-palette-custom: ("brand": #0f766e); v3 class names come back with $lte-palette-aliases: ("lightblue": "sky", "maroon": "pink").

• Docs → Colors — install, palette, class families, presets, brand-colour recipe (with and without Sass), how the colours were derived: https://adminlte.io/themes/v4/docs/colors.html
• UI → Colors — presets applied to the page's own chrome, every component, and a brand-colour checker that reports contrast, proposes a same-hue value that passes and prints the snippet: https://adminlte.io/themes/v4/UI/colors.html
• Theme Customize now lists the palette in its sidebar / navbar / footer pickers and has the same presets: https://adminlte.io/themes/v4/generate/theme.html

Requested in #6103 by @johnnyq.

Header search, restyled

The navbar search from 4.3.0 was a raw .input-group with an outline button and no styling of its own, which fell apart on coloured headers. It is now a quiet pill with the search icon inside as the submit button, coloured only from theme-relative tokens — soft glass on any coloured or dark header, soft grey on a white one — that widens slightly on focus. The sidebar filter gets the same treatment (mixins/_search-field.scss, $lte-search-field-* variables). Below md a search icon links to the search page.

Fixes

• Sidebar taller than the viewport with the sidebar filter in place (#6104, reported by @dfsmania). .sidebar-wrapper was sized with a hard-coded 100vh − header height, which assumed only the brand sat above it. .app-sidebar is now a flex column and the wrapper fills whatever is left, so anything placed above or below the menu sizes correctly.
• The Main Header docs page still showed AdminLTE 3's inert data-widget="navbar-search" snippet; it now shows the real markup.

Quality

• Accessibility gate widened to 18 pages, zero serious/critical violations — including the two new pages.
• Unit tests up to 67; the palette test keeps the Sass map, the demo data and the contrast/hue rules in step.

Install

npm install admin-lte@4.4.0

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@4.4.0/dist/css/adminlte.min.css">
<!-- optional: the extended palette -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@4.4.0/dist/css/adminlte-colors.min.css">
<script src="https://cdn.jsdelivr.net/npm/admin-lte@4.4.0/dist/js/adminlte.min.js"></script>

Full details in the CHANGELOG.

Full Changelog: v4.3.1...v4.4.0

Full Changelog: v4.3.1...v4.4.0