Colors & Skins
AdminLTE 4 styles itself with Bootstrap 5.3's theme colours — primary, success, danger, warning, info, secondary, light, dark — and nothing else, which keeps adminlte.css small. Since 4.4.0 an opt-in stylesheet adds fourteen more colours, every one readable with white text, plus the sidebar/header skins and dashboard presets that go with them.
Try it live: the Colors demo applies every skin to the page's own sidebar and header and has a checker for your brand colour; the Theme Customize page lists the palette in its sidebar / navbar / footer pickers.
Getting the stylesheet
Load dist/css/adminlte-colors.css (≈ 5 kB gzipped) after adminlte.css. It only adds classes; nothing in adminlte.css is overridden, and projects that don't load it pay nothing.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@4.8.4/dist/css/adminlte.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@4.8.4/dist/css/adminlte-colors.min.css">From npm in a bundler: import "admin-lte/dist/css/adminlte-colors.min.css". The Sass entry is src/scss/adminlte-colors.scss, which is also how you add your own colours (below). An RTL build, adminlte-colors.rtl.css, exists for symmetry; the sheet has no direction-dependent rules.
Two palettes
Since 4.5.0 you can have the colours designed for 4.4 (below) or the AdminLTE 3 originals, unchanged. They ship as two files that define the same class names with different values, so load one of them after adminlte.css:
| File | What you get | Text colour rule |
|---|---|---|
adminlte-colors.css | 14 colours designed in OKLCH — orange, amber, olive, teal, sky, indigo, violet, fuchsia, pink, navy, steel, slate, graphite, midnight — every one readable with white text, placed to sit next to Bootstrap's theme colours | Bootstrap 5's color-contrast(), 4.5:1 |
adminlte-colors-v3.css | the 18 AdminLTE 3 colours — lightblue, navy, olive, lime, fuchsia, maroon, blue, indigo, purple, pink, red, orange, yellow, green, teal, cyan, gray, gray-dark — values as they were in the 3.2 build | AdminLTE 3's rule (Bootstrap 4 YIQ): white on lightblue, olive, teal, cyan …; dark on lime, orange, yellow. Eight miss WCAG AA — data-lte-contrast="aa" flips those |
Both emit exactly the same class families, so everything on this page applies to either. The Colors demo and Theme Customize have a palette toggle to compare them live.
<!-- either the designed palette … -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@4.8.4/dist/css/adminlte-colors.min.css">
<!-- … or the AdminLTE 3 originals, not both -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@4.8.4/dist/css/adminlte-colors-v3.min.css">The AdminLTE 3 originals, with the contrast ratio white text reaches on each — several are below WCAG AA's 4.5:1 for normal text, exactly as they were in v3; that is the trade-off of keeping them as they were:
| Name | Hex | Text (v3 rule) | White text | |
|---|---|---|---|---|
lightblue | #3c8dbc | white | 3.7:1 ⚠︎ | The AdminLTE 2/3 signature blue (skin-blue header) |
navy | #001f3f | white | 16.6:1 | |
olive | #3d9970 | white | 3.5:1 ⚠︎ | |
lime | #01ff70 | dark (#1f2d3d) | 1.4:1 | Dark text |
fuchsia | #f012be | white | 3.8:1 ⚠︎ | |
maroon | #d81b60 | white | 4.9:1 | |
blue | #007bff | white | 4.0:1 ⚠︎ | Bootstrap 4 blue |
indigo | #6610f2 | white | 7.2:1 | Bootstrap 4 indigo |
purple | #6f42c1 | white | 6.5:1 | Bootstrap 4 purple |
pink | #e83e8c | white | 3.8:1 ⚠︎ | Bootstrap 4 pink |
red | #dc3545 | white | 4.5:1 | Bootstrap 4 red |
orange | #fd7e14 | dark (#1f2d3d) | 2.6:1 | Bootstrap 4 orange — dark text |
yellow | #ffc107 | dark (#1f2d3d) | 1.6:1 | Bootstrap 4 yellow — dark text |
green | #28a745 | white | 3.1:1 ⚠︎ | Bootstrap 4 green |
teal | #20c997 | white | 2.1:1 ⚠︎ | Bootstrap 4 teal |
cyan | #17a2b8 | white | 3.0:1 ⚠︎ | Bootstrap 4 cyan |
gray | #6c757d | white | 4.7:1 | |
gray-dark | #343a40 | white | 11.5:1 | The v3 dark sidebar (sidebar-dark-*) background |
The v3 sheet is built from the same Sass as the designed one (src/scss/adminlte-colors-v3.scss sets $lte-palette to the v3 map and $lte-palette-contrast: "yiq"), so $lte-palette-custom, $lte-palette-aliases and the rest apply to it too. Its skin presets are AdminLTE 2's — a coloured header over the v3 dark sidebar (text-bg-gray-dark, the exact sidebar-dark-* background) or over a white one:
| Skin | Header | Sidebar | Primary | v2/v3 name |
|---|---|---|---|---|
| Blue | text-bg-lightblue · dark | text-bg-gray-dark · dark | lightblue | skin-blue — the classic AdminLTE look. |
| Black | bg-body · light | text-bg-gray-dark · dark | blue | skin-black — white header, dark sidebar. |
| Purple | text-bg-purple · dark | text-bg-gray-dark · dark | purple | skin-purple. |
| Green | text-bg-green · dark | text-bg-gray-dark · dark | green | skin-green. |
| Red | text-bg-red · dark | text-bg-gray-dark · dark | red | skin-red. |
| Yellow | text-bg-yellow · light | text-bg-gray-dark · dark | yellow | skin-yellow — dark text on the header. |
| Blue light | text-bg-lightblue · dark | bg-body · light | lightblue | skin-blue-light. |
| Black light | bg-body · light | bg-body · light | blue | skin-black-light — all white chrome. |
| Purple light | text-bg-purple · dark | bg-body · light | purple | skin-purple-light. |
| Green light | text-bg-green · dark | bg-body · light | green | skin-green-light. |
| Red light | text-bg-red · dark | bg-body · light | red | skin-red-light. |
| Yellow light | text-bg-yellow · light | bg-body · light | yellow | skin-yellow-light. |
Making the v3 colours pass AA
data-lte-contrast="aa" fixes the eight without touching a single value. The v3 rule assigns white text to eight colours that do not reach WCAG AA's 4.5:1 for normal text. The attribute — on <html>, <body> or any container — flips just those to the ink that does, leaving every background byte-identical (4.8.0):
<html lang="en" data-lte-contrast="aa">| Colour | Default (v3 rule) | With aa |
|---|---|---|
teal #20c997 | white text — 2.13:1 | black text — 9.86:1 |
cyan #17a2b8 | white text — 3.04:1 | black text — 6.90:1 |
green #28a745 | white text — 3.13:1 | black text — 6.70:1 |
olive #3d9970 | white text — 3.51:1 | black text — 5.99:1 |
lightblue #3c8dbc | white text — 3.67:1 | black text — 5.73:1 |
fuchsia #f012be | white text — 3.79:1 | black text — 5.54:1 |
pink #e83e8c | white text — 3.82:1 | black text — 5.50:1 |
blue #007bff | white text — 3.98:1 | black text — 5.28:1 |
The ratios are stated rather than shown: rendering the failing combination would put text on this page that fails the same check. Flip the switch on the Colors demo to see both on real components.
It covers everywhere the palette paints text on its own colour: .text-bg-*, .bg-gradient-*, .card-* headers, .direct-chat-*, and the button, badge and pill text that data-lte-primary produces. Three things worth knowing:
- It has to be black. AdminLTE 3's own dark ink,
#1f2d3d, only clears 4.5:1 on two of the eight —tealandcyan. The colours that already take dark text (lime,orange,yellow) keep#1f2d3dand are not touched. - Pair a flipped colour with
data-bs-theme="light"so a sidebar or header carrying it has nav links that follow the heading:<nav class="app-header navbar navbar-expand text-bg-lightblue" data-bs-theme="light">. The demo pages do this for you when the switch is on. .text-lightblueand.link-lightblueare a different question — those paint the colour as text on the page background, where the same eight are also thin. Use the emphasis token (--bs-lightblue-text-emphasis), which is the colour shaded 60% and readable on a light background.
The attribute works with either sheet; on the designed palette it emits nothing at all, because every colour there clears AA with white text by construction — so it costs nothing to leave in your markup.
The palette
Nine chromatic colours and five neutrals for chrome. Every one takes white text at 4.5:1 or better, so .text-bg-*, small boxes, badges and coloured sidebars all read the same way — no per-colour “is this one dark text?” question.
| Name | Hex | OKLCH | White text | Character & use |
|---|---|---|---|---|
orange | #c84e10 | oklch(0.58 0.17 42) | 4.6:1 | Burnt orange — the warm accent that isn't "danger". Sales, orders, anything active but not alarming. |
amber | #a56710 | oklch(0.57 0.12 67) | 4.6:1 | Ochre — a warm neutral that pairs with navy and graphite. Pending states, secondary metrics. |
olive | #5f7f0f | oklch(0.55 0.13 126) | 4.6:1 | Moss — an earthy green a full 31° from success. Growth and eco metrics without reading as "OK". |
teal | #12827d | oklch(0.55 0.09 190) | 4.7:1 | Blue-green — the calm data colour. Charts, tables, the default "info" for people who find cyan too bright. |
sky | #127caf | oklch(0.56 0.12 237) | 4.6:1 | The classic AdminLTE blue, remade so white text passes. Headers, the modern take on the v2 skin-blue. |
indigo | #6f60ea | oklch(0.58 0.20 283) | 4.6:1 | Blue-violet — brand-forward, 23° from primary. Sidebars, hero widgets, a strong brand accent. |
violet | #9553db | oklch(0.58 0.20 303) | 4.6:1 | Purple — the middle of the magenta run. Secondary brand accent, tags. |
fuchsia | #b347be | oklch(0.59 0.20 324) | 4.6:1 | Magenta — for emphasis, sparingly. Highlights, one-off badges. |
pink | #cd388d | oklch(0.59 0.20 350) | 4.6:1 | Deep pink — v3 "maroon", designed. Marketing and engagement metrics. |
navy | #1d2d4c | oklch(0.30 0.06 263) | 13.7:1 | Sidebar navy — deep and cool, not black. Sidebars; the classic dark-sidebar look. |
steel | #3a4860 | oklch(0.40 0.04 261) | 9.2:1 | Mid-dark blue-grey — the sidebar tone many admin kits default to. Sidebars that should read as "dark" without going near black. |
slate | #566577 | oklch(0.50 0.03 253) | 6.0:1 | Mid neutral — a cool grey-blue. Headers, muted cards, secondary sidebars. |
graphite | #32363c | oklch(0.33 0.01 258) | 12.1:1 | Near-black cool grey. Quiet sidebars that let the widgets carry the colour. |
midnight | #1e1d2d | oklch(0.24 0.03 287) | 16.6:1 | Near-black with a violet cast. Full-dark chrome (sidebar and header); pairs with vivid accents. |
The names describe the colours; Bootstrap's $colors names (blue, purple, red, …) are deliberately not generated because they overlap the theme colours. Bootstrap's own --bs-blue, --bs-purple … variables are still there.
What you get for each colour
The same shapes Bootstrap emits for a theme colour, so opacity modifiers and dark mode work as you expect:
| You get | Example | Notes |
|---|---|---|
| Tokens | --bs-teal, --bs-teal-rgb | plus -bg-subtle, -border-subtle, -text-emphasis in both colour modes |
| Background | .bg-teal, .bg-teal.bg-opacity-25 | same variable shape as .bg-primary |
| Background + contrast text | .text-bg-teal | white text; what widgets use |
| Gradient | .bg-gradient-teal | the AdminLTE 3 class; also emitted for the eight theme colours (.bg-gradient-primary …) |
| Text, border, link | .text-teal, .border-teal, .link-teal | with .text-opacity-*, .border-opacity-*, .link-underline-* |
| Cards | .card-teal, .card-outline.card-teal, .card.text-bg-teal | feeds the same --lte-card-variant-* variables the theme-colour cards use |
| Callouts | .callout-teal | subtle background, emphasis text — flips in dark mode |
| Direct chat | .direct-chat-teal | |
| Widgets | .small-box.text-bg-teal, .info-box.text-bg-teal, .badge.text-bg-teal, .progress-bar.bg-teal | these already colour themselves through .text-bg-* / .bg-* |
| Buttons | .btn.text-bg-teal, .btn.bg-gradient-teal | get a hover / active shade |
Making one of them your primary
Bootstrap compiles $primary into its components at build time: .btn-primary ships with --bs-btn-bg: #0d6efd, not var(--bs-primary). Overriding the token repaints .text-primary and .bg-primary and leaves every button, pagination and checkbox blue — the reason a skin used to look half-applied.
Both colour sheets rewire those components and point them at a palette colour with one attribute:
<html lang="en" data-lte-primary="teal">Nothing changes without the attribute, and it works on any container — a section of a page can carry its own primary. What follows the colour:
| Follows | Details |
|---|---|
| Buttons | .btn-primary, .btn-outline-primary (hover, active and disabled states shaded exactly as Bootstrap shades its own), .btn-link |
| Links | a, .link-primary, pagination links — with Bootstrap's dark-mode tint in dark mode |
| Utilities and tokens | --bs-primary, --bs-primary-rgb, the subtle / emphasis trio, .text-primary, .bg-primary, .border-primary, .text-bg-primary, .alert-primary, .list-group-item-primary, .accordion |
| Forms | focus ring and focus border on .form-control / .form-select, .form-check-input:checked, indeterminate checkboxes, .form-range thumbs |
| Components | .nav-pills .nav-link.active, .pagination .active, .progress-bar, .list-group-item.active, .dropdown-item.active, --bs-focus-ring-color |
| AdminLTE | .card-primary (and .card-outline), .direct-chat-primary, .toast-primary, .small-box / .info-box carrying .bg-primary |
Bootstrap's own theme colours work too — data-lte-primary="danger" needs no palette colour at all. Two things stay Bootstrap-blue by design: .table-primary's striped and hover tints, and the switch knob painted into a data-URI when a switch is checked.
For a brand colour that is not in the palette, set the token yourself and keep the attribute:
[data-lte-primary="brand"] {
--bs-primary: #7a5af8;
--bs-primary-rgb: 122, 90, 248;
/* optional — otherwise the hover shade is computed with color-mix() */
--lte-primary-hover: #6849e6;
--lte-primary-active: #5b3fd1;
}With Sass it is one line — $lte-palette-custom: ("brand": #7a5af8) — and data-lte-primary="brand" is generated for you, shades and contrast text included. Pick a colour that takes white text: the checkmark inside a checked checkbox is white in Bootstrap and cannot be recoloured from CSS. Every colour in the designed palette qualifies; in the v3 palette, lime, yellow and orange do not.
Each skin preset below names the primary that goes with it, and the Colors demo and Theme Customize pages apply it with the skin.
Skins — colouring the sidebar and header
A “skin” is not a class of its own in AdminLTE 4: it is a background utility plus data-bs-theme on the sidebar and the header. data-bs-theme="dark" gives light nav links and brand text; "light" gives dark ones. Because every palette colour takes white text, a coloured sidebar or header always pairs with dark:
<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>Admin dashboards tend to offer their looks in four families, and the presets follow them. bg-body, bg-body-secondary and bg-body-tertiary are Bootstrap's surface utilities (they follow the element's data-bs-theme, which is why “Default” is a dark sidebar); every text-bg-* and bg-gradient-* entry needs adminlte-colors.css.
| Skin | Header | Sidebar | Primary | Why |
|---|---|---|---|---|
| Light — White chrome; the widgets and the active item carry the colour. | ||||
| Light | bg-body · light | bg-body · light | primary | White sidebar and header; colour comes only from widgets and badges. |
| Light & indigo | text-bg-indigo · dark | bg-body-tertiary · light | indigo | The "-light" family: white sidebar under a coloured header. |
| Light & sky | text-bg-sky · dark | bg-body · light | sky | The v2 skin-blue-light: sky header over a white sidebar. |
| Semi-dark — Dark sidebar, light header — the most common admin layout, and AdminLTE's default. | ||||
| Default | bg-body · light | bg-body-secondary · dark | primary | What AdminLTE 4 ships: white header, dark neutral sidebar. |
| Graphite | bg-body · light | text-bg-graphite · dark | indigo | Quiet near-black sidebar; the widgets carry the colour. |
| Navy | bg-body · light | text-bg-navy · dark | teal | Deep blue sidebar under a white header — the classic dark-sidebar look. |
| Steel | bg-body · light | text-bg-steel · dark | sky | Mid-dark blue-grey sidebar — reads as dark without going near black. |
| Midnight | bg-body · light | text-bg-midnight · dark | violet | Near-black with a violet cast; made for vivid accents. |
| Indigo | bg-body · light | text-bg-indigo · dark | indigo | Brand-forward: one strong hue on the sidebar, everything else calm. |
| Full dark — Dark sidebar and dark header; the body stays light unless the visitor picks dark mode. | ||||
| Navy & sky | text-bg-sky · dark | text-bg-navy · dark | sky | The modern take on the classic skin-blue. |
| Midnight mono | text-bg-midnight · dark | text-bg-midnight · dark | indigo | One deep tone for all chrome — the "dark header" layout. |
| Steel mono | text-bg-steel · dark | text-bg-steel · dark | sky | Blue-grey chrome throughout; softer than midnight. |
| Slate & teal | text-bg-teal · dark | text-bg-slate · dark | teal | Mid-weight sidebar with a cool header — softer than navy. |
| Graphite & orange | text-bg-orange · dark | text-bg-graphite · dark | orange | Warm header over a quiet sidebar — the energetic v2 skins, restrained. |
| Coloured & gradient — Brand-forward chrome: one strong hue, or the v3 gradient sheen. | ||||
| Violet mono | text-bg-violet · dark | text-bg-violet · dark | violet | Header and sidebar in one hue — the bold, single-brand look. |
| Gradient indigo | bg-body · light | bg-gradient-indigo · dark | indigo | The v3 gradient sheen on a brand sidebar, white header. |
| Gradient teal | bg-body · light | bg-gradient-teal · dark | teal | Calm and fresh; teal sidebar with the gradient sheen. |
Dashboard sets — which four to put on a widget row
Picking four colours for a row of small boxes is where palettes usually fall apart. These quartets are chosen by hue relationship rather than taste; use them as-is or as a starting point.
| Set | Classes | Why it works |
|---|---|---|
| Balanced | indigotealamberpink | Four hues roughly 90° apart (283 · 190 · 68 · 350) — maximum separation, no two widgets read as the same family. The default recommendation. |
| Cool | indigoskytealviolet | An analogous run from 190° to 301°. Calm and low-contrast between neighbours; suits data-dense pages where the numbers should lead. |
| Warm | pinkorangeamberfuchsia | The warm run through red (322° → 68°). Energetic; e-commerce, marketing and sales dashboards. |
| With Bootstrap | primarytealorangeviolet | The palette sits in the gaps between Bootstrap's theme colours, so mixing is safe: primary 260 · teal 190 · orange 42 · violet 301. |
Adding your brand colours
With Sass (recommended): set $lte-palette-custom before importing the entry, and your colour gets every token, utility and component hook the shipped colours get. Names you reuse override the shipped value.
// your-adminlte.scss
$lte-palette-custom: (
"brand": #0f766e, // new colour → .bg-brand, .text-bg-brand, .card-brand, …
"sky": #0369a1 // re-tune a shipped colour to your blue
);
@import "admin-lte/src/scss/adminlte-colors";To ship only your colours, set $lte-palette itself. Two more knobs: $lte-palette-aliases — extra names that generate the same classes as an existing entry (AdminLTE 3 projects: ("lightblue": "sky", "maroon": "pink")) — and $lte-palette-min-contrast-ratio, the contrast Bootstrap's color-contrast() requires when it picks the automatic text colour (default 4.5; 3 is WCAG AA for large text and UI components).
Choosing a brand colour that works. The one property that matters is that white text on it reaches 4.5:1 — that keeps .text-bg-brand, small boxes and a branded sidebar readable. Most brand blues, greens and purples pass; bright oranges, yellows and cyans don't. The checker on the demo page reports the ratio, offers a same-hue version darkened just enough to pass, warns when your hue sits on top of an existing one, and prints the Sass snippet.
Without Sass, on the prebuilt CSS, you can hand-write one colour — the whole shape for a single name:
:root, [data-bs-theme="light"] {
--bs-brand: #0f766e;
--bs-brand-rgb: 15, 118, 110;
--bs-brand-text-emphasis: #062f2c;
--bs-brand-bg-subtle: #cfe4e2;
--bs-brand-border-subtle: #9fc8c5;
}
[data-bs-theme="dark"] {
--bs-brand-text-emphasis: #6fada8;
--bs-brand-bg-subtle: #031816;
--bs-brand-border-subtle: #094742;
}
.bg-brand { --bs-bg-opacity: 1; background-color: rgba(var(--bs-brand-rgb), var(--bs-bg-opacity)) !important; }
.text-bg-brand { color: #fff !important; background-color: rgba(var(--bs-brand-rgb), var(--bs-bg-opacity, 1)) !important; }
.text-brand { --bs-text-opacity: 1; color: rgba(var(--bs-brand-rgb), var(--bs-text-opacity)) !important; }
.border-brand { --bs-border-opacity: 1; border-color: rgba(var(--bs-brand-rgb), var(--bs-border-opacity)) !important; }
.card-brand, .bg-brand, .text-bg-brand {
--lte-card-variant-bg: #0f766e; --lte-card-variant-bg-rgb: 15, 118, 110;
--lte-card-variant-color: #fff; --lte-card-variant-color-rgb: 255, 255, 255;
}How the palette was designed
The fourteen values are generated, not picked. scripts/palette.mjs in the AdminLTE repo derives them in OKLCH — the perceptually uniform colour space Tailwind v4 and Radix build their palettes in — from three rules:
- Equal contrast, by construction. Each chromatic colour is the lightest value of its hue whose white text still reaches 4.6:1. That puts every one at OKLCH L ≈ 0.55–0.59 — the same visual weight as Bootstrap's own primary, success and danger — so a row of mixed widgets never has one colour shouting.
- Hues in the gaps. Bootstrap already owns red (21°), yellow (85°), green (157°), cyan (218°) and blue (260°). The palette hues sit at least 17° from each of them and 20° from each other — orange 42 · amber 67 · olive 126 · teal 190 · sky 237 · indigo 283 · violet 303 · fuchsia 324 · pink 350 — so mixing palette and theme colours on one page is safe.
- Chroma capped, neutrals tinted. Chroma is capped at 0.20 (parity with primary 0.23 / danger 0.20), so indigo and violet don't overpower teal and amber, which sit at the sRGB gamut limit for this lightness. The five neutrals — navy, steel, slate, graphite, midnight — are cool-tinted rather than pure grey and sit at the lightness steps popular admin kits use for their sidebars (L ≈ 0.24, 0.30, 0.33, 0.40, 0.50).
npm run palette regenerates the map from those targets; npm run palette -- --check and a unit test verify contrast and hue separation.
Accessibility and dark mode
- Every shipped colour clears 4.5:1 with white text (the lowest is 4.6:1), so
.text-bg-*never needs a per-colour exception. - Solid utilities (
.bg-*,.text-bg-*) are the same in both colour modes, as Bootstrap's own are. The subtle tokens — and with them.callout-*— flip fordata-bs-theme="dark"using the same derivation Bootstrap applies to.alert-*. .text-*and.link-*on a coloured background are your responsibility, exactly as with Bootstrap's theme colours.
Migrating from AdminLTE 3
v3's extended colours were lightblue, navy, olive, lime, fuchsia, maroon plus Bootstrap 4's named palette, several with white text below 4:1. The new palette keeps the useful names (navy, olive, fuchsia) and remakes the rest:
| AdminLTE 3 | Now | |
|---|---|---|
bg-lightblue | text-bg-sky | same hue, set so white text passes |
bg-maroon | text-bg-pink | |
bg-navy / bg-olive / bg-fuchsia | same names | values redesigned |
bg-lime | — | no white-text lime exists; use text-bg-olive or Bootstrap's text-bg-warning |
bg-purple, bg-teal, bg-orange, bg-indigo … | text-bg-violet, text-bg-teal, text-bg-orange, text-bg-indigo | see the palette table |
sidebar-dark-primary, navbar-light … | text-bg-* + data-bs-theme | see Skins above |
bg-gradient-* | bg-gradient-* | kept, for palette and theme colours |
Two ways to keep existing markup working: load adminlte-colors-v3.css and every v3 name is back with its original value (see Two palettes above), or use the designed palette with the alias one-liner $lte-palette-aliases: ("lightblue": "sky", "maroon": "pink");. The full reference lives in the core docs: adminlte.io/themes/v4/docs/colors.html.