Nearby lessons
31 of 39🌙 BS5 Dark Mode
📌 What Is Bootstrap 5 Dark Mode?
Bootstrap 5 supports a color mode via data-bs-theme. Set data-bs-theme="dark" on <html> (or a parent) to switch to dark theme; data-bs-theme="light" for light. Use semantic classes like .bg-body and .text-body so colors follow the theme.
🌙 Enabling Dark Mode (data-bs-theme)
data-bs-theme="light" or data-bs-theme="dark" – set on <html> to switch the whole page. Bootstrap’s CSS variables (e.g. backgrounds, borders) update automatically. You can toggle it with JavaScript by changing the attribute.
🔄 Toggling Theme with JavaScript
Read document.documentElement.getAttribute('data-bs-theme') and set document.documentElement.setAttribute('data-bs-theme', 'dark') or 'light' to switch. Use .bg-body and .text-body so content follows the theme.
✅ Dark Mode Best Practices
- Set data-bs-theme on
<html>for global theme. - Use .bg-body and .text-body so components adapt.
- Toggle with JS:
setAttribute('data-bs-theme', 'dark'|'light').
🧠 Test Your Knowledge
3 QuestionsProgress: 0 / 3
Keep Going!BS5 Flex