Bootstrap 5 Dark Mode

Bootstrap 5 does not have a built-in dark mode toggle, but you can implement it using CSS and JavaScript. Below are different ways to apply dark mode to a website using Bootstrap 5.

1. Using Bootstrap's Dark Theme Classes

Bootstrap provides .bg-dark, .text-white, and .navbar-dark to apply a dark theme.

<!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/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-dark text-white">

    <nav class="navbar navbar-dark bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Dark Mode Navbar</a>
        </div>
    </nav>

    <div class="container mt-5">
        <h2>Welcome to Dark Mode</h2>
        <p>This page uses Bootstrap's dark theme classes.</p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

2. Dark Mode Toggle with JavaScript

To switch between light and dark themes dynamically, use JavaScript.

<!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/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .dark-mode {
            background-color: #121212;
            color: white;
        }
    </style>
</head>
<body class="light-mode">

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Theme Toggle</a>
            <button class="btn btn-outline-dark" id="darkModeToggle">Dark Mode</button>
        </div>
    </nav>

    <div class="container mt-5">
        <h2>Click the button to toggle dark mode</h2>
        <p>This is an example of adding a dark mode toggle using JavaScript.</p>
    </div>

    <script>
        const toggleButton = document.getElementById("darkModeToggle");
        toggleButton.addEventListener("click", function() {
            document.body.classList.toggle("dark-mode");
            if (document.body.classList.contains("dark-mode")) {
                toggleButton.textContent = "Light Mode";
            } else {
                toggleButton.textContent = "Dark Mode";
            }
        });
    </script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

3. Save Dark Mode Preference with Local Storage

To keep the dark mode preference even after reloading the page, use localStorage.

<!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 with Local Storage</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .dark-mode {
            background-color: #121212;
            color: white;
        }
    </style>
</head>
<body>

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Dark Mode</a>
            <button class="btn btn-outline-dark" id="darkModeToggle">Toggle Dark Mode</button>
        </div>
    </nav>

    <div class="container mt-5">
        <h2>Dark Mode with Local Storage</h2>
        <p>This mode stays the same even after refreshing the page.</p>
    </div>

    <script>
        const toggleButton = document.getElementById("darkModeToggle");
        const body = document.body;

        // Check if dark mode is enabled in local storage
        if (localStorage.getItem("dark-mode") === "enabled") {
            body.classList.add("dark-mode");
            toggleButton.textContent = "Light Mode";
        }

        toggleButton.addEventListener("click", function() {
            body.classList.toggle("dark-mode");
            if (body.classList.contains("dark-mode")) {
                localStorage.setItem("dark-mode", "enabled");
                toggleButton.textContent = "Light Mode";
            } else {
                localStorage.setItem("dark-mode", "disabled");
                toggleButton.textContent = "Dark Mode";
            }
        });
    </script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

4. Dark Mode Using Bootstrap 5 Variables (SCSS)

If you're using Bootstrap 5 with SCSS, you can define dark mode variables.

$theme-colors: (
  "dark": #121212,
  "light": #ffffff,
  "primary": #0d6efd
);

@import "bootstrap";

Compile the SCSS file into CSS, and apply it to your project.

Conclusion

Method 1: Use Bootstrap’s built-in .bg-dark and .text-white classes.
Method 2: Toggle dark mode dynamically with JavaScript.
Method 3: Save user preferences using localStorage.
Method 4: Use SCSS for deep customization.

Would you like help adding a dark mode toggle in the navbar?

About It E Research

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.