How to implement dark mode in Bootstrap 5? (A Quick Tutorial)

Bootstrap 5 supports dark mode through CSS variables and JavaScript: add the dark class to the body, override variables such as --bs-body-bg, use localStorage to save user preferences, and listen for the automatic fallback of prefers-color-scheme; you need to additionally adjust the styles of buttons, forms, cards and other components to ensure contrast.

Bootstrap 5 doesn't include a built-in dark mode toggle, but it's straightforward to add one using its CSS variables and a small amount of custom JavaScript and CSS.

Enable dark mode via CSS custom properties

Bootstrap 5 uses CSS variables (eg, --bs-body-bg , --bs-body-color ) for theming. To support dark mode, override those variables inside a dark class on the or element.

• Add a dark class to when dark mode is active
• Define dark-mode values ​​in your custom CSS — target Bootstrap's key variables
• Prefer prefers-color-scheme: dark as a fallback for OS-level preference

Add a toggle button with JavaScript

Use a simple button that toggle the dark class and saves the user's preference in localStorage .

• Check localStorage on page load to restore last setting
• Fall back to matchMedia if no saved preference exists
• Toggle the class and update storage on click

const darkToggle = document.getElementById('dark-toggle');<br> const body = document.body;<br><br> const setDarkMode = (isDark) =&gt; {<br> body.classList.toggle('dark', isDark);<br> localStorage.setItem('darkMode', isDark);<br> };<br><br> // Init<br> const saved = localStorage.getItem('darkMode');<br> const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;<br> setDarkMode(saved ? JSON.parse(saved) : prefersDark);<br><br> // Toggle<br> darkToggle.addEventListener('click', () =&gt; {<br> setDarkMode(!body.classList.contains('dark'));<br> });

Style key Bootstrap components for dark mode

Don't rely only on overriding body-level variables — some components need extra attention.

• Buttons : Adjust --bs-btn-bg , --bs-btn-color , and hover/focus states
• Forms : Update --bs-form-control-bg , --bs-form-control-border-color , and placeholder text
• Tables & cards : Tweak background and border colors to maintain contrast
• Test readability — avoid pure black backgrounds ( #000 ); use #121212 or #1e1e1e instead

Optional: Auto-sync with OS preference

You can listen to system changes and update your UI without requiring a manual toggle.

• Use window.matchMedia('(prefers-color-scheme: dark)') and its addEventListener
• Only apply auto-switching if no user preference is stored
• Respect user choice — never override an explicit toggle selection

Basically, it's not complex — just layer custom CSS variables, manage state with JS, and test contrast. Bootstrap 5's design system makes it easy to theme consistently once the foundation is in place.

The above is the detailed content of How to implement dark mode in Bootstrap 5? (A Quick Tutorial). For more information, please follow other related articles on the PHP Chinese website!