Theme Customize
Pick a colour mode and a background for the sidebar, the navbar and the footer. Each
choice is applied to this page at once, and the
markup to copy is printed next to the pickers — a "theme" in AdminLTE 4 is just a
background utility plus data-bs-theme on the
element, no extra CSS.
The Extended palette group in each picker
(orange, amber, olive, teal, sky, indigo, violet, fuchsia, pink, navy, steel, slate,
graphite, midnight) needs the optional
css/adminlte-colors.css, which this page loads.
Every one of those colours takes white text, so pair it with the
Dark mode — the picker does that for you. Palette,
presets and how to add your brand colour:
Colors documentation
·
Colors demo.
Presets
Sidebar + navbar combinations in the families admin dashboards usually offer. Click one to apply it to this page and fill the pickers below; then fine-tune.
Light
White chrome; the widgets and the active item carry the colour.
Semi-dark
Dark sidebar, light header — the most common admin layout, and AdminLTE's default.
Full dark
Dark sidebar and dark header; the body stays light unless the visitor picks dark mode.
Coloured & gradient
Brand-forward chrome: one strong hue, or the v3 gradient sheen.
Dark sidebar
skin-blue, skin-purple, skin-green, skin-red, skin-yellow, skin-black — a coloured header over the v3 dark sidebar.
Light sidebar
The "-light" family: the same headers over a white sidebar.
Sidebar Theme
Navbar Theme
Footer Theme
Primary Color
Bootstrap bakes $primary into its
components, so .btn-primary stays blue
however you set --bs-primary. The palette
sheet rewires them: put
data-lte-primary on
<html>
and buttons, links, pagination, checkboxes, progress bars and the focus ring
follow the colour you pick.