Bootstrap - Dark Mode
With the growing popularity of dark mode in modern web design, Bootstrap 5 makes it easier than ever to implement dark mode on your website. While Bootstrap 5 does not come with built-in support for toggling between light and dark themes, you can easily achieve this with a few tweaks.
This guide will cover:
What is Dark Mode?
Using Bootstrap 5’s Color Schemes
Setting Up Dark Mode with Bootstrap 5
Adding a Dark Mode Toggle Button
Dark Mode with CSS Variables
Best Practices for Implementing Dark Mode
Conclusion
1. What is Dark Mode?
Dark mode is a color scheme that uses light-colored text, icons, and graphical interface elements on a dark background. It is designed to reduce eye strain, especially in low-light conditions, and can save battery life on OLED screens.
2. Using Bootstrap 5’s Color Schemes
Bootstrap 5 introduces several built-in utility classes that support dark mode styling, such as bg-dark, text-light, navbar-dark, etc. These classes make it easy to apply a dark theme to your website elements.
Example
<div class="bg-dark text-light p-3">
This is a dark mode section using Bootstrap utilities.
</div>
bg-dark: Applies a dark background color
text-light: Applies a light text color
3. Setting Up Dark Mode with Bootstrap 5
To implement a site-wide dark mode, you can define two sets of styles: one for the light theme and one for the dark theme. You can use a combination of Bootstrap’s built-in classes and custom styles.
Example HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 Dark Mode</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body.dark-mode {
background-color: #121212;
color: #ffffff;
}
</style>
</head>
<body>
<div class="container my-5">
<h1 class="text-center">Bootstrap 5 Dark Mode Example</h1>
<button id="themeToggle" class="btn btn-primary">Toggle Dark Mode</button>
<p class="mt-4">This is a sample paragraph. Toggle the button above to switch between light and dark mode.</p>
</div>
<script>
const toggleButton = document.getElementById('themeToggle');
toggleButton.addEventListener('click', () => {
document.body.classList.toggle('dark-mode');
});
</script>
</body>
</html>
Explanation
body.dark-mode: Applies dark background and white text when .dark-mode class is added to the body.
JavaScript: Toggles the dark-mode class on the <body> element when the button is clicked.
4. Adding a Dark Mode Toggle Button
For a more polished solution, you can add a dark mode toggle button that saves the user's preference using localStorage.
Example with localStorage
<script>
// Check for saved user preference, if any
if (localStorage.getItem('theme') === 'dark') {
document.body.classList.add('dark-mode');
}
const toggleButton = document.getElementById('themeToggle');
toggleButton.addEventListener('click', () => {
document.body.classList.toggle('dark-mode');
// Save preference to localStorage
if (document.body.classList.contains('dark-mode')) {
localStorage.setItem('theme', 'dark');
} else {
localStorage.setItem('theme', 'light');
}
});
</script>
Explanation
localStorage.getItem(): Retrieves the saved theme preference.
localStorage.setItem(): Saves the current theme preference.
5. Dark Mode with CSS Variables
For a more flexible approach, use CSS variables to define your color schemes and switch between them dynamically.
Example with CSS Variables
<style>
:root {
--bg-color: #ffffff;
--text-color: #000000;
}
.dark-mode {
--bg-color: #121212;
--text-color: #ffffff;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
</style>
<script>
const toggleButton = document.getElementById('themeToggle');
toggleButton.addEventListener('click', () => {
document.body.classList.toggle('dark-mode');
});
</script>
Explanation
CSS Variables: Defines color variables for background and text.
Dynamic Switching: The .dark-mode class changes the variable values.
6. Best Practices for Implementing Dark Mode
Test Readability: Ensure text, buttons, and other UI elements are easily readable in both modes.
Use CSS Variables: Leverage CSS variables for easy theme management.
Consider Accessibility: Make sure your dark mode is accessible for users with visual impairments.
Save User Preference: Use localStorage to remember the user's choice.
7. Conclusion
Implementing dark mode in your Bootstrap 5 projects is simple and can greatly enhance the user experience. By using Bootstrap’s utility classes, custom CSS, and JavaScript, you can easily add a dark mode feature to your website.
