Bootstrap has long been a favourite framework for frontend developers, providing a robust set of tools for creating responsive, mobile-first websites. With the release of Bootstrap 5.3, one of the standout features is the introduction of colour modes, including a built-in dark mode. This update makes it easier than ever to implement light and dark themes in your projects, enhancing user experience across different environments.
In this blog post, we’ll explore Bootstrap 5.3’s colour modes, how they work, and how you can leverage them in your projects with practical code examples.
What Are Bootstrap 5.3 Colour Modes?
Bootstrap 5.3 introduces a system for managing colour modes, with an emphasis on supporting both light and dark modes out of the box. This means that with minimal configuration, you can offer your users the option to switch between a light theme, which is great for bright environments, and a dark theme, which is easier on the eyes in low-light conditions.
Colour modes in Bootstrap 5.3 are handled through CSS variables (custom properties) that define the colours used throughout your application. This approach provides flexibility and ease of customisation while maintaining consistency across components.
Key Features of Bootstrap 5.3 Colour Modes
- Default Light and Dark Modes: Bootstrap now includes a dark mode alongside the default light mode, making it easy to toggle between them.
- CSS Variables: The colour modes are powered by CSS variables, which makes them highly customisable and easy to manipulate with JavaScript or CSS.
- Automatic Mode Detection: You can set your website to automatically detect the user’s system preference (light or dark mode) and apply the corresponding theme.
How to Implement Colour Modes in Bootstrap 5.3
Let’s dive into how you can use these new colour modes in your Bootstrap 5.3 projects. We’ll cover the basics of enabling colour modes, customising them, and switching between them programmatically.
1. Setting Up a Basic Bootstrap Project
First, let’s set up a basic Bootstrap project. Include the Bootstrap 5.3 CSS 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 Colour Modes</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 Colour Modes</h1>
<p class="text-center">This is a demonstration of Bootstrap 5.3 colour modes.</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 simple setup includes Bootstrap 5.3 and a basic layout with a button to toggle between colour modes.
2. Enabling Dark Mode
By default, Bootstrap uses the light mode, but enabling dark mode is straightforward. You can do this by adding the data-bs-theme attribute to your body or html tag.
<body data-bs-theme="dark">
...
</body>This will switch your entire site to dark mode. If you want to keep it in light mode, you can use data-bs-theme="light".
3. Automatic Theme Detection
Bootstrap 5.3 can automatically detect the user's system preference for dark or light mode and apply the appropriate theme. To enable this, set the data-bs-theme attribute to auto:
<body data-bs-theme="auto">
...
</body>With this setting, Bootstrap will use the system preference to determine whether to apply the light or dark theme.
4. Toggling Between Modes Programmatically
You can also give users control to toggle between light and dark modes using JavaScript. Here’s how you can add a button to switch modes:
<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 checks the current theme and toggles between light and dark modes when the button is clicked. The data-bs-theme attribute on the body element is dynamically updated based on the current mode.
5. Customising Colour Modes
Bootstrap 5.3’s colour modes are powered by CSS variables, which means you can customise them to fit your design needs. To customise, you can override these variables in your CSS.
Here’s an example of customising the dark mode background and text colour:
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 CSS modifies the background and text colours for both light and dark modes, allowing you to tailor the appearance of your site to your brand or aesthetic preferences.
6. Using Bootstrap Components with Colour Modes
Bootstrap components automatically adapt to the active colour mode. For example, buttons, cards, and navbars will change their appearance based on whether light or dark mode is active. 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>This card will automatically adapt its background and text colours based on the current mode, thanks to Bootstrap’s built-in colour mode support.
Conclusion
Bootstrap 5.3’s introduction of colour modes makes it easier than ever to implement both light and dark themes in your web projects. Whether you want to provide users with an automatic theme based on their system settings or give them the option to toggle between modes, Bootstrap 5.3 provides the tools you need.
By using the data-bs-theme attribute and leveraging CSS variables, you can easily customise and control the appearance of your site across different colour modes. This not only improves the user experience but also ensures your site looks great in any lighting condition.
With these features at your disposal, Bootstrap 5.3 is a powerful tool for modern web development, helping you create responsive, accessible, and aesthetically pleasing websites that meet the needs of today’s users.