Over 200 CSS custom properties in two scopes: :root (light defaults) and :root[data-bs-theme='dark'] (dark overrides). Override any variable without editing core files.
Light Theme Key Values
| Variable | Value | Notes |
|---|---|---|
--body-bg | #ffffff | White canvas |
--body-color | #212529 | Dark text |
--color-primary | #112855 | Brand navy — same in both themes |
--accent-color-primary | #3f8ff0 | Brand accent — same in both themes |
Dark Theme Key Values
| Variable | Value | Notes |
|---|---|---|
--body-bg | #0e1318 | Near-black canvas |
--body-color | #e6ebf1 | Off-white text |
--secondary-bg | #151b22 | Dark card surface |
--link-color | #8ab4f8 | Lightened blue |
Override Pattern
:root {{ --color-primary: #1a3a6e; }}
:root {{ --body-bg: #f4f6f9; }}
:root[data-bs-theme='dark'] {{ --body-bg: #060a0f; }}Reference: See the Brand + Bootstrap Showcase article for visual colour swatches.