Theme Preview

Everything below shows what SHOULD change when a theme is applied.

var(--theme-bg) + var(--theme-text)

Background / Text

This block uses theme background + text.

var(--theme-surface)

Surface

This block uses theme surface.

var(--theme-border)

Border

This block uses theme border.

var(--theme-text)

Theme text color

var(--theme-muted)

Theme muted text

var(--theme-primary)

Buttons

var(--theme-surface) + var(--theme-border)
Card Header (Primary)

This card uses theme surface + primary header.

Bootstrap alert colors (do NOT change)

Alerts

Info alert
Warning alert
Danger alert
Navbar + Sidebar use var(--theme-surface)

Navbar / Sidebar Preview

Navbar and sidebar use theme surface + text.

Theme Behavior Reference

UI Element Should Change? Variable Used Notes
Body BackgroundYES--theme-bgFull page background
Body TextYES--theme-textAll default text
Card BackgroundYES--theme-surfaceCard body
Card BorderYES--theme-borderCard border color
Card Header (bg-primary)OPTIONALBootstrap --bs-primaryDoes NOT change unless overridden
Primary ButtonYES--theme-primaryUses your theme primary
AlertsNOBootstrap colorsDo NOT change with theme
Navbar BackgroundYES--theme-surfaceOverrides AdminLTE navbar
Sidebar BackgroundYES--theme-surfaceOverrides AdminLTE sidebar