In Bootstrap 5, you can implement a dark mode by using CSS custom properties and a little bit of JavaScript. Here’s a step-by-step guide on how to create a dark mode toggle in Bootstrap 5:
- Set up the HTML structure:
<body>
<!-- Your page content goes here -->
<!-- Dark mode toggle button -->
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="darkModeToggle">
<label class="form-check-label" for="darkModeToggle">Dark Mode</label>
</div>
<!-- Include Bootstrap 5 CSS and JavaScript files -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- Your custom JavaScript code -->
<script src="custom.js"></script>
</body>- Create a custom CSS file (e.g.,
custom.css) and define the CSS variables for light and dark mode:
:root {
--bg-color: #f8f9fa; /* Light mode background color */
--text-color: #212529; /* Light mode text color */
}
[data-theme="dark"] {
--bg-color: #343a40; /* Dark mode background color */
--text-color: #f8f9fa; /* Dark mode text color */
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}- Create a custom JavaScript file (e.g.,
custom.js) and add the logic for the dark mode toggle:
const darkModeToggle = document.getElementById('darkModeToggle');
darkModeToggle.addEventListener('change', function() {
if (this.checked) {
document.documentElement.setAttribute('data-theme', 'dark');
} else {
document.documentElement.removeAttribute('data-theme');
}
});- Link the custom CSS file (
custom.css) in your HTML file:
<link href="custom.css" rel="stylesheet">With these steps, you have set up the basic structure and functionality for a dark mode toggle in Bootstrap 5. The dark mode toggle button is created using a form switch component. The CSS variables are defined in the custom.css file, and the JavaScript logic for toggling the dark mode is implemented in the custom.js file.
When the dark mode toggle is switched on, the data-theme attribute is added to the html element, which applies the dark mode styles defined in the CSS file. When the toggle is switched off, the data-theme attribute is removed, and the light mode styles are applied.
Feel free to customize the CSS variables and styles in the custom.css file to match your preferred dark mode design.
Remember to include the Bootstrap 5 CSS and JavaScript files as well to ensure the proper functioning of Bootstrap components.