Bootstrap 5.3 adds first-class color modes. Set data-bs-theme="dark" on <html> or any subtree to swap component colors. Components pick up adjusted backgrounds, borders, and text without duplicate markup.
Toggles and persistence
Build a theme switcher that flips data-bs-theme between light and dark, then store preference in localStorage so return visits stay consistent. Respect prefers-color-scheme for the initial paint before JS runs.
Custom surfaces
Use bg-body, bg-body-secondary, and text-body instead of hard-coded bg-white when surfaces should adapt. Utility-first dark mode in Tailwind uses class prefixes—Bootstrap centralizes tokens at the theme root.
Self-check
- Which attribute switches a subtree to dark styling?
- Why prefer
bg-bodyoverbg-whitein theme-aware layouts? - How would you honor OS dark mode before JavaScript loads?
Interview prep
- class vs data-bs-theme for dark mode?
data-bs-themeon a root element toggles CSS variables; can pair withcolor-modescripts in BS 5.3.