Bootstrap 5.3 ships with native dark mode via data-bs-theme. No custom CSS needed — set the attribute and all Bootstrap components switch automatically.
Quick Implementation
<!-- Toggle dark mode on entire page -->
<button onclick="
const html = document.documentElement;
const isDark = html.getAttribute('data-bs-theme') === 'dark';
html.setAttribute('data-bs-theme', isDark ? 'light' : 'dark');
localStorage.setItem('theme', isDark ? 'light' : 'dark');
">Toggle</button>
<!-- On page load -->
<script>
const saved = localStorage.getItem('theme') || 'light';
document.documentElement.setAttribute('data-bs-theme', saved);
</script>
Key API
| Method | What It Does |
|---|---|
data-bs-theme="dark" | Activates dark mode on element |
data-bs-theme="light" | Forces light mode |
matchMedia('prefers-color-scheme: dark') | Detects OS preference |
localStorage | Persists user's choice |
1. Bootstrap 5 Dark Mode Button Toggle
Simple button that toggles data-bs-theme on the html element — Bootstrap 5.3's native color mode.
2. Bootstrap 5 Dark Mode Switch Toggle
Animated CSS switch for dark/light mode — stores preference in localStorage.
4. Bootstrap 5 System Preference Auto-Detect
Automatically applies dark or light mode based on the user's OS preference, with manual override.
Frequently Asked Questions
Bootstrap 5.3 added native dark mode via the data-bs-theme attribute. Set data-bs-theme='dark' on the html element (or any container) and all Bootstrap components inside switch to dark colors automatically. No custom CSS needed.
Save to localStorage on toggle: localStorage.setItem('theme', 'dark'). On page load read it: const theme = localStorage.getItem('theme') || 'light'. Apply immediately before Bootstrap loads to avoid flash: document.documentElement.setAttribute('data-bs-theme', theme).
Use matchMedia: const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches. Listen for changes: window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => applyTheme(e.matches ? 'dark' : 'light')).
Add a button in the navbar with an icon (moon/sun). On click toggle data-bs-theme on document.documentElement between 'dark' and 'light'. Update the icon based on current state. Save to localStorage. Read localStorage on page load to restore preference.
Need a Full Bootstrap 5 Admin Dashboard?
Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.
Browse Templates →Use code FIRST30 for 30% off your first purchase.