With the growing popularity of dark mode in web and mobile applications, it's become almost essential for developers to offer users the option to switch between light and dark themes. Bootstrap 5.3 makes it easier than ever to implement these modes in your projects. This blog post will guide you through the steps of setting up light and dark mode in Bootstrap 5.3, so you can offer a more versatile and user-friendly experience.
Why Light and Dark Mode?
Before diving into the implementation, it’s worth understanding why offering both light and dark modes is important. Different users have different preferences—some prefer the traditional light mode for its clarity and readability, while others opt for dark mode to reduce eye strain, especially in low-light environments. Offering both modes enhances accessibility and provides a more personalised user experience.
Getting Started with Bootstrap 5.3
First, make sure you have Bootstrap 5.3 included in your project. You can do this by linking to the Bootstrap CDN in your HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5.3 Light and Dark Mode</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 class="text-center">Bootstrap 5.3 Light and Dark Mode</h1>
<p class="text-center">Learn how to implement light and dark mode in Bootstrap 5.3.</p>
<button class="btn btn-primary" id="toggle-mode">Toggle Mode</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>This sets up a basic HTML file with Bootstrap 5.3 included.
Enabling Light and Dark Mode
Bootstrap 5.3 introduces the data-bs-theme attribute, which allows you to toggle between light and dark modes easily. By default, Bootstrap uses the light mode, but you can switch to dark mode by adding the data-bs-theme attribute to the body or html tag.
Light Mode
Light mode is the default setting, so you don’t need to add anything special for it. However, if you want to explicitly set the light mode, you can do so with the following:
<body data-bs-theme="light">
...
</body>Dark Mode
To enable dark mode, simply set the data-bs-theme attribute to "dark":
<body data-bs-theme="dark">
...
</body>With this setting, Bootstrap will automatically apply the light or dark theme based on the user’s system settings. This offers a seamless experience for users who have already set a preference at the system level.
Toggling Between Modes Programmatically
If you want to give users the ability to switch between light and dark modes manually, you can easily implement a toggle button using JavaScript.
Here’s an example of how to do this:
<button class="btn btn-primary" id="toggle-mode">Toggle Mode</button>
<script>
const toggleButton = document.getElementById('toggle-mode');
const bodyElement = document.body;
toggleButton.addEventListener('click', () => {
const currentTheme = bodyElement.getAttribute('data-bs-theme');
if (currentTheme === 'dark') {
bodyElement.setAttribute('data-bs-theme', 'light');
} else {
bodyElement.setAttribute('data-bs-theme', 'dark');
}
});
</script>This script listens for a click on the toggle button and switches between light and dark modes by changing the data-bs-theme attribute on the body element.
Customising Light and Dark Mode
Bootstrap 5.3’s colour modes are based on CSS variables, making it easy to customise the look and feel of your themes. You can override these variables in your custom CSS to match your brand’s design or create a unique user interface.
Here’s an example of customising background and text colours for both light and dark modes:
body[data-bs-theme="dark"] {
--bs-body-bg: #121212;
--bs-body-color: #e0e0e0;
}
body[data-bs-theme="light"] {
--bs-body-bg: #ffffff;
--bs-body-color: #000000;
}This custom CSS allows you to modify the background and text colours depending on the active theme, providing you with full control over the appearance of your application.
Applying Colour Modes to Bootstrap Components
Bootstrap components automatically adapt to the active colour mode. This means that when you switch between light and dark modes, elements like buttons, cards, and navbars will change their appearance accordingly. Here’s an example using a Bootstrap card:
<div class="card mt-4">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This card adjusts based on the active colour mode.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>When you switch to dark mode, this card will automatically update its background and text colours to match the dark theme, thanks to Bootstrap’s built-in support for colour modes.
Conclusion
Bootstrap 5.3 makes it incredibly easy to implement light and dark modes in your web projects. Whether you want to automatically detect the user’s system preference or give them the option to toggle between modes, Bootstrap provides the tools you need.
By using the data-bs-theme attribute and customising CSS variables, you can create a tailored, visually appealing experience that caters to all users, regardless of their environment or personal preferences. With these features, Bootstrap 5.3 empowers you to build modern, responsive websites that are both functional and aesthetically pleasing in any light condition.
Take advantage of these new features in Bootstrap 5.3 to enhance your projects and deliver a superior user experience.