How to implement dark mode with Bootstrap 5?
Bootstrap 5 supports setting dark mode through the data-bs-theme attribute without the need for additional libraries; 2. Use JavaScript to switch themes and save user preferences; 3. It can be combined with prefers-color-scheme to adapt to the system theme by default; 4. Custom components should use Bootstrap's CSS variables to maintain consistency.
Adding dark mode to a website using Bootstrap 5 is straightforward thanks to its built-in support for color modes and CSS variables. You don't need JavaScript by default, but you can enhance the experience with it to remember user preferences.
Use Bootstrap 5's Built-in Color Modes
Bootstrap 5 supports light and dark color modes through the data-bs-theme attribute. Just set it on the html or body element to switch themes.
Example:<body data-bs-theme="dark"> <div class="bg-body-tertiary p-3">Dark mode content</div> </body>
This activates Bootstrap's dark theme using CSS variables. Components like cards, forms, and navbars automatically adapt.
Toggle Between Light and Dark Mode
To let users switch themes, use a button and a small script to change the data-bs-theme value.
HTML Toggle Button:<button id="theme-toggle" class="btn btn-outline-secondary"> Toggle Dark Mode </button>JavaScript to Handle Toggle:
Add this script to switch and save preference:
const toggle = document.getElementById('theme-toggle');
toggle.addEventListener('click', () => {
const current = document.documentElement.getAttribute('data-bs-theme');
const next = current === 'dark' ? 'light' : 'dark';
document.documentElement.setAttribute('data-bs-theme', next);
localStorage.setItem('theme', next);
});
// On load, check saved preference
const saved = localStorage.getItem('theme');
if (saved) {
document.documentElement.setAttribute('data-bs-theme', saved);
} else {
// Default to light or respect OS preference
document.documentElement.setAttribute('data-bs-theme', 'light');
}Respect User's System Preference
You can default to the user's OS setting using prefers-color-scheme .
Check OS Preference:Update your script to detect system theme if no preference is saved:
const getPreferredTheme = () => {
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
return 'dark';
}
return 'light';
};
const saved = localStorage.getItem('theme');
document.documentElement.setAttribute('data-bs-theme',
saved || getPreferredTheme());Style Custom Elements with CSS Variables
Bootstrap uses CSS variables for theming. Use them in your own styles to stay consistent.
Example: .custom-box {
background-color: var(--bs-body-bg);
color: var(--bs-body-color);
}
This ensures your custom components follow the current theme.
Basically, just set data-bs-theme , optionally add a toggle with JS, and leverage Bootstrap's CSS variables. No extra libraries needed.
The above is the detailed content of How to implement dark mode with Bootstrap 5?. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undresser.AI Undress
AI-powered app for creating realistic nude photos
ArtGPT
AI image generator for creative art from text prompts.
Stock Market GPT
AI powered investment research for smarter decisions
Hot Article
Popular tool
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
20516
7
13629
4
How to animate Bootstrap components for a more dynamic feel? (Advanced CSS)
Mar 13, 2026 am 01:13 AM
The fade and show classes of Bootstrap5 are only status markers and do not contain animation logic. You need to manually add @keyframes or transitions to achieve fade-in and fade-out; custom components need to configure additional animation rules, and when JS controls the display, the show class must be added with delay to ensure redrawing.
How to ensure your Bootstrap site is fully accessible (WCAG)? (Accessibility)
Mar 08, 2026 am 01:25 AM
The Bootstrap component does not automatically add the aria attributes required for complete WCAG. You need to manually complete aria-expanded, role="dialog", aria-labelledby, etc.; the form must be equipped with an explicit label; :focus needs to use :focus-visible to ensure that the keyboard focus is visible; the color contrast must reach 4.5:1.
How to create a login and registration page layout with Bootstrap? (User Authentication UI)
Mar 05, 2026 am 01:34 AM
Bootstrap5 forms need to wrap each field with form-control and semantic labels; login and registration should be separated into separate routes to reuse the card UI; password verification requires front-end and back-end double verification; responsiveness needs to control the container width and title size; buttons must be disabled and prompts cleared after submission.
How to integrate Bootstrap with a JavaScript framework like React or Vue? (Integration)
Mar 12, 2026 am 01:22 AM
Only BootstrapCSS should be introduced in React/Vue instead of JS to avoid global style pollution and jQuery dependency; SCSS modules should be imported on demand to reduce the size; interactive functions must be imported with encapsulation libraries (such as react-bootstrap) or ESM; grid classes need to adapt to JSX/Vue syntax, and explicit and implicit classes should be used with SSR with caution.
How to create a professional-looking landing page with Bootstrap? (Project-Based)
Mar 10, 2026 am 12:22 AM
Bootstrap’sdefaultstylingfeelsgenericduetouncustomizedspacing,typography,andcolor—fixableviaCSSvariablesorSass,notdirectedits;avoidfixedwidths,misuseofgridclasses,andrender-blockingassetstoensureresponsivenessandfastLCP.
How to properly install and set up Bootstrap 5 in your web project? (Getting Started)
Mar 16, 2026 am 12:40 AM
To correctly introduce Bootstrap5, you need to load bootstrap.min.css first, then load bootstrap.bundle.min.js (including Popper), and ensure that the viewport tag exists; after npm installation, you need to manually introduce compiled files in the dist directory. SCSS customization must be preceded by variable declarations, and JS components must be explicitly initialized to avoid jQuery contamination.
How to use Bootstrap utility classes to speed up your workflow? (Efficiency)
Mar 11, 2026 am 12:18 AM
Use mt-3 to represent the top margin, mb-3 to represent the bottom margin, and the suffixes t/b/s/e correspond to top/bottom/start/end respectively; ms-auto implements right alignment in the flex container, me-2 replaces the abandoned mr-2, and responsive classes such as mt-md-4 need to have breakpoint prefixes.
How to implement a carousel or image slider with Bootstrap? (Content Display)
Mar 07, 2026 am 01:01 AM
Need not. Bootstrap5's carousel is automatically initialized by default. You need to manually call newbootstrap.Carousel() only when data-bs-ride is modified or the element is dynamically inserted.
