🎨 Bootstrap 5 Color Modes – Light & Dark Mode Support Guide
🧲 Introduction – Enable Light & Dark Modes in Bootstrap 5 Easily
Bootstrap 5 supports dynamic light and dark color modes using native CSS variables and customizable themes. This makes it easy to build interfaces that adapt to user preferences or toggle between modes with a simple switch.
🎯 In this guide, you’ll learn:
- How light and dark modes work in Bootstrap 5
- How to use system color mode detection or manual toggles
- Code examples with switch buttons and variable overrides
- Best practices for accessible and theme-ready UI
🌗 What Are Bootstrap 5 Color Modes?
Bootstrap 5 uses CSS custom properties (variables) to define theme colors like background, text, borders, etc. These variables can be overridden to support both light and dark modes in real-time.
| Mode | CSS Root Variables |
|---|---|
| Light | --bs-body-bg: #fff, --bs-body-color: #212529 |
| Dark | --bs-body-bg: #212529, --bs-body-color: #f8f9fa |
✅ You can use either system preference or user-controlled toggles to activate these modes.
🔗 Method 1: Enable Auto Color Mode via Media Query
@media (prefers-color-scheme: dark) {
:root {
--bs-body-bg: #212529;
--bs-body-color: #f8f9fa;
}
}
🔍 Code Explanation:
prefers-color-scheme: dark: Detects user system theme.- Overrides Bootstrap’s CSS variables dynamically for dark theme.
- No JavaScript required.
🧪 Example – Auto Mode Detection in HTML
<style>
body {
background-color: var(--bs-body-bg);
color: var(--bs-body-color);
}
@media (prefers-color-scheme: dark) {
:root {
--bs-body-bg: #121212;
--bs-body-color: #f1f1f1;
}
}
</style>
<body class="text-center py-5">
<h1>Adaptive Theme with Bootstrap 5</h1>
<p>This text color adjusts with your OS light/dark mode.</p>
</body>
🔍 Code Explanation:
var(--bs-body-bg)andvar(--bs-body-color)ensure live switching.- System-wide dark mode triggers the media query override.
🔘 Method 2: Manual Light/Dark Mode Toggle with JavaScript
Add a toggle switch or button that updates a class (dark-mode) on the <body>.
✅ HTML + JS Toggle Example:
<button id="themeToggle" class="btn btn-secondary">Toggle Theme</button>
<style>
body {
background-color: var(--bs-body-bg);
color: var(--bs-body-color);
}
:root {
--bs-body-bg: #fff;
--bs-body-color: #212529;
}
.dark-mode {
--bs-body-bg: #212529;
--bs-body-color: #f8f9fa;
}
</style>
<script>
document.getElementById('themeToggle').addEventListener('click', () => {
document.body.classList.toggle('dark-mode');
});
</script>
🔍 Code Explanation:
dark-modeclass updates the CSS variables on the<body>.- JavaScript toggles this class to switch between modes.
🧩 Use Bootstrap Components with Color Mode Variables
Many Bootstrap components respect text and background utilities that derive from CSS variables.
✅ Themed Card Example:
<div class="card p-3" style="background-color: var(--bs-body-bg); color: var(--bs-body-color);">
<h5 class="card-title">Dark/Light Adaptive Card</h5>
<p class="card-text">This card responds to color mode settings.</p>
</div>
🔍 Code Explanation:
- No need to manually style
text-whiteorbg-dark—variables do the work. - Allows cleaner toggling with fewer class changes.
🛠️ Best Practices for Color Mode Integration
| Practice | Why It’s Important |
|---|---|
Use var(--bs-*) variables | Enables dynamic color switching without class rewrites |
| Include dark mode media queries | Supports OS-level theme preferences |
| Avoid hardcoded hex values | Use semantic variables for accessibility and contrast |
| Test accessibility contrast | Ensure readable text in both themes |
| Add toggle UI in navbar/header | Offers user control when preferred |
📌 Summary – Recap & Implementation Tips
Bootstrap 5 makes it simple to create dynamic dark and light themes using CSS variables. You can support system preferences or build a manual toggle to enhance the user experience.
🔍 Key Takeaways:
- Use CSS variables like
--bs-body-bgfor theming - Enable dark mode via media queries or manual toggle
- Bootstrap components adapt to variable-based styling
- Avoid hardcoded colors; rely on theme-safe variables
⚙️ Whether you’re building a dashboard, blog, or app UI, color modes improve user personalization and engagement.
❓ FAQs – Bootstrap 5 Color Modes
❓ How do I enable dark mode in Bootstrap 5?
✅ Use prefers-color-scheme media queries or toggle a class like .dark-mode with CSS variable overrides.
❓ Can I switch Bootstrap themes without reloading the page?
✅ Yes. Update CSS variables using JavaScript for live switching without reloads.
❓ Does Bootstrap 5 include built-in dark mode classes?
❌ No. You must define color variables or use third-party themes that extend Bootstrap.
❓ Can I use the Bootstrap Utility API with dark mode?
✅ Yes. Utilities like bg-dark, text-light, etc., can be combined with color variables for even more control.
❓ Is dark mode accessible by default in Bootstrap 5?
✅ Partially. You must ensure good contrast and text legibility when defining dark mode variables.
Share Now :
