Bootstrap 5 Dark Mode
Creating beautiful dark-themed interfaces with Bootstrap
🌙 What is Dark Mode?
Bootstrap 5 Dark Mode allows you to create dark-themed websites easily. It provides built-in color schemes and utilities to switch between light and dark themes, improving user experience and reducing eye strain.
<!-- Enable dark mode with data-bs-theme -->
<div data-bs-theme="dark">
<h1>Dark Mode Enabled!</h1>
<p>This content uses dark theme.</p>
</div>
Output:
Dark Mode Enabled!
This content uses dark theme.
Dark Mode Features
Theme Attribute
Use data-bs-theme attribute
<html data-bs-theme="dark">Toggle Themes
Switch between light and dark
<button onclick="toggleTheme()">
Toggle
</button>Component Support
All components work in dark mode
<div class="card">
Dark card
</div>Custom Colors
Override default dark colors
<div class="bg-dark text-light">
Custom
</div>🔹 Enabling Dark Mode Globally
To activate dark theme across your entire Bootstrap project, add the attribute data-bs-theme="dark" to your HTML's <html> or <body> tag. This single declaration instructs all Bootstrap components—buttons, cards, navbars, forms—to automatically switch to their dark variant. The framework swaps its CSS custom property values, changing background colors, text colors, borders, and shadows to a predefined dark palette optimized for contrast and readability. This global switch provides a consistent dark experience without the need to manually restyle individual elements, saving significant development time.
<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>
<meta charset="UTF-8">
<title>Dark Mode Site</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h1>Welcome to Dark Mode</h1>
<p>All content is now dark-themed!</p>
</div>
</body>
</html>Output:
Welcome to Dark Mode
All content is now dark-themed!
🔹 Dark Mode on Specific Components
For more granular control, you can apply dark mode to individual sections or components instead of the whole page. Simply add data-bs-theme="dark" to any parent container element, like a <div>, <section>, or a specific card. All Bootstrap components nested within that container will automatically adopt the dark theme, while elements outside remain in light mode. This technique is perfect for creating contrast within a page, such as a dark sidebar, a themed modal, or an interactive widget, allowing for creative and user-focused design patterns.
<!-- Light mode page with dark section -->
<div class="container">
<h2>Light Mode Content</h2>
<div data-bs-theme="dark" class="p-4 bg-dark">
<h3>Dark Mode Section</h3>
<p>This section uses dark theme.</p>
<button class="btn btn-primary">Dark Button</button>
</div>
</div>Output:
Light Mode Content
Dark Mode Section
This section uses dark theme.
🔹 Dark Mode Toggle Button
Implementing a user-controlled theme switcher enhances accessibility and user preference. This involves creating a button that uses JavaScript to dynamically toggle the data-bs-theme attribute value between "light" and "dark" on the <html> element. The change is instantaneous, with no page reload required, providing a smooth user experience. You can store the user's preference in localStorage to persist their choice across sessions. This feature is a significant UX improvement, catering to user comfort, reducing eye strain in low-light environments, and aligning with modern OS-level theme settings.
<!-- Theme toggle button -->
<button id="themeToggle" class="btn btn-secondary">
Toggle Dark Mode
</button>
<script>
const toggleBtn = document.getElementById('themeToggle');
toggleBtn.addEventListener('click', () => {
const html = document.documentElement;
const currentTheme = html.getAttribute('data-bs-theme');
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
html.setAttribute('data-bs-theme', newTheme);
});
</script>🔹 Dark Mode Cards
When placed inside a container with data-bs-theme="dark", Bootstrap cards automatically transform. Their background shifts from light to dark, text colors invert for readability (e.g., dark text becomes light), and border colors adjust to maintain definition against the dark background. The card's subcomponents, like card headers and footers, also receive appropriate contrasting styles. This automatic theming ensures cards remain visually distinct, accessible, and integrated within the dark UI. No extra classes are needed; the theme context handles all styling, maintaining design consistency effortlessly.
<div data-bs-theme="dark">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Dark Card</h5>
<p class="card-text">This card uses dark mode styling.</p>
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>Output:
🔹 Dark Mode Forms
Form controls are fully compatible with Bootstrap's dark mode. Input fields, textareas, select menus, and checkboxes/radios automatically receive dark-themed styling within a dark-themed container. This includes dark backgrounds, light-colored borders and text, and appropriately styled placeholders and validation states. The framework ensures that focus states and interactive feedback remain clear and visible. This comprehensive theming means complex forms maintain usability, visual appeal, and accessibility in dark mode without requiring any custom CSS for individual form elements, streamlining the development of theme-aware applications.
<div data-bs-theme="dark" class="p-4">
<form>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="mb-3">
<label for="message" class="form-label">Message</label>
<textarea class="form-control" id="message" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>