Bootstrap 5 Dark Mode

Dark mode has become an essential feature for modern web design, offering a sleek aesthetic and reducing eye strain in low-light environments. With Bootstrap 5, implementing dark mode is easier than ever, thanks to its utility-based approach and custom theming capabilities.

In this guide, we’ll show you how to create a dark mode theme using Bootstrap 5 and explain best practices for seamless integration.

Why Use Dark Mode?

Dark mode isn’t just a trend—it’s a usability feature that provides tangible benefits:

  • Improved Accessibility: Easier on the eyes in dimly lit conditions.
  • Battery Efficiency: Saves battery life on OLED and AMOLED screens.
  • Modern Design Aesthetic: Enhances the visual appeal of your website.

Bootstrap 5’s flexibility makes it straightforward to add dark mode to your website.

Key Approaches to Bootstrap 5 Dark Mode

There are two main ways to implement dark mode in Bootstrap 5:

  1. Using Bootstrap’s Predefined Dark Theme Classes.
  2. Creating a Custom Toggleable Dark Mode.

1. Using Predefined Dark Theme Classes

Bootstrap 5 includes several built-in classes for dark mode styling. You can quickly apply these classes to elements without additional configuration.

Example:

<!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">
</head>
<body class="bg-dark text-white">
  <div class="container py-5">
    <h1 class="text-center">Dark Mode Example</h1>
    <p>This is a simple example using Bootstrap's dark theme classes.</p>
    <button class="btn btn-light">Light Button</button>
    <button class="btn btn-dark">Dark Button</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Key Classes:

  • bg-dark: Applies a dark background color.
  • text-white: Ensures text is visible on dark backgrounds.
  • btn-dark and btn-light: Buttons for dark and light themes.

This approach is perfect for static dark mode implementations.

2. Creating a Toggleable Dark Mode

To create a toggleable dark mode (where users can switch between light and dark themes), you need to use JavaScript along with Bootstrap’s classes.

Step-by-Step Guide:

  1. 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 Toggle</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body.dark-mode {
      background-color: #212529;
      color: #ffffff;
    }
  </style>
</head>
<body>
  <div class="container py-5">
    <div class="d-flex justify-content-between align-items-center">
      <h1>Dark Mode Toggle</h1>
      <button id="themeToggle" class="btn btn-secondary">Enable Dark Mode</button>
    </div>
    <p>This example demonstrates how to toggle between light and dark themes dynamically.</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    const themeToggle = document.getElementById('themeToggle');
    themeToggle.addEventListener('click', () => {
      document.body.classList.toggle('dark-mode');
      themeToggle.textContent = document.body.classList.contains('dark-mode') 
        ? 'Disable Dark Mode' 
        : 'Enable Dark Mode';
    });
  </script>
</body>
</html>

Explanation:

  • CSS Class for Dark Mode (dark-mode):
    • Customizes body with dark background and light text.
  • JavaScript Toggle:
    • Toggles the dark-mode class on the <body> element.
    • Updates the button text dynamically.

Customizing Bootstrap 5 for Dark Mode

For advanced customization, you can use Bootstrap’s Sass variables to create a custom dark theme. This method is ideal for sites requiring precise control over colors and components.

Steps to Customize:

  • Install Bootstrap via npm: 
npm install bootstrap
  • Modify Sass Variables: Create a custom scss file and override the default variables. 
$body-bg: #212529; // Dark background
$body-color: #ffffff; // Light text
$link-color: #0d6efd;

@import "bootstrap/scss/bootstrap";
  • Compile Your Sass: Use a tool like Sass CLI, webpack, or Gulp to compile your custom CSS.
  • Apply the Custom Theme: Link the compiled CSS file in your HTML.

Best Practices for Dark Mode

  • Provide a Toggle Option: Allow users to switch between light and dark modes based on their preference.
  • Preserve User Settings: Use localStorage to remember the user’s choice. 
// Save the theme preference
localStorage.setItem('theme', 'dark');

// Load the theme preference on page load
if (localStorage.getItem('theme') === 'dark') {
  document.body.classList.add('dark-mode');
}
  • Test Contrast Ratios: Ensure text is legible on dark backgrounds by testing color contrast using tools like WebAIM Contrast Checker.

Use Cases for Bootstrap 5 Dark Mode

  • Web Applications: Enhance usability for users who work in low-light environments.
  • E-Commerce Sites: Provide an aesthetically pleasing shopping experience.
  • Content Platforms: Increase readability and reduce eye strain for articles and blogs.

FAQs About Bootstrap 5 Dark Mode

1. Can I enable dark mode based on the user’s system settings?

Yes, you can use the CSS prefers-color-scheme media query:

@media (prefers-color-scheme: dark) {
  body {
    background-color: #212529;
    color: #ffffff;
  }
}

2. Does Bootstrap 5 have built-in dark mode?

Bootstrap 5 doesn’t have a global toggle for dark mode but offers utility classes like bg-dark and text-white. You can create a global dark mode using Sass or JavaScript.

3. How can I test dark mode?

Switch your operating system or browser to dark mode to test. Alternatively, use developer tools to emulate the prefers-color-scheme setting.

Conclusion

Bootstrap 5 makes implementing dark mode intuitive and flexible, whether you use predefined classes, custom themes, or JavaScript toggles. With its utility-first approach and customization options, you can provide a modern and user-friendly dark mode experience for your audience.

Leave a Comment