Bootstrap 5 Color Modes

Last Updated : 31 Jul, 2024

Bootstrap 5 Color Modes is a new feature included in Bootstrap v5.3.0. It now has color modes or themes, and users can choose between the default light mode and the new dark mode. They can also make their own color mode or theme by using the styles that are already there as a model.

Bootstrap 5 Color Modes Options:

Dark Mode: Bootstrap now has a dark mode feature. With Bootstrap v5.3.0, we can make our own color mode toggler and use the different color modes as we see fit.
How it Works: The data-bs-theme attribute, which lets us control color mode styles, makes the dark mode work. It can be used with any element, not just <HTML>. We also have two scss files. root.scss in order to handle various color modes and variables.scss for making your own color modes.
Nesting Color Modes: It is used to change the color mode for a group of elements or components by using the data-bs-theme attribute on a nested element.
Usage: It has two uses:
- Dark Mode: The data-bs-theme="dark" tag on the <HTML> element enables the project's built-in dark color mode.
- Building using SASS: Setting $enable-dark-mode to false in Sass disables dark mode. Bootstrap controls color modes with a custom Sass mixin, color-mode().
Custom Color Modes: It is used to create our own color modes by creating a data-bs-theme selector with a customs value as the name and adjusting Sass and CSS variables as appropriate.
Javascript: It lets visitors switch color modes and manipulate the data-bs-theme attribute on the root element, <HTML>. The official documentation of Bootstrap v5.3.0 includes a toggler that first defers to a user's system color mode but allows them to choose a specific color mode.
CSS: Its components are provided using Sass variables and mixins. Dark mode alters numerous root-level CSS variables. Variables in variables-dark.scss are used to create dark color mode CSS variables.

Example 1: In this example, we will see the implementation of Dark Mode on a Collapse Button.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet"
        integrity=
"sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" 
          crossorigin="anonymous" />
</head>

<body class="m-3">
    <center>
        <h1 class="text-success">GeeksforGeeks</h1>
        <strong>Bootstrap 5 Dark Mode Collapse Button</strong> <br />

        <div class="dropdown my-2 d-inline-block" 
             data-bs-theme="light">
            <button class="btn btn-success" type="button" 
                    data-bs-toggle="collapse"
                data-bs-target="#GFGdefaultcollapse">
                Default Collapse Button
            </button>

            <div class="collapse" id="GFGdefaultcollapse">
                <div class="card card-body mt-2 mb-2">
                    GFG is a Computer Science portal for geeks.
                </div>
            </div>

            <div class="dropdown d-inline-block" data-bs-theme="dark">
                <button class="btn btn-success" type="button" 
                        data-bs-toggle="collapse"
                        data-bs-target="#GFGdarkcollapse">
                    Dark Collapse Button
                </button>

                <div class="collapse" id="GFGdarkcollapse">
                    <div class="card card-body mt-2 text-light">
                        GFG is a Computer Science portal for geeks.
                    </div>
                </div>

                <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
                    integrity=
"sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
                    crossorigin="anonymous"></script>
            </div>
        </div>
    </center>
</body>

</html>

Output:

Example 2: In this example, we will see the implementation of Nesting Color Modes, in which we will create an outer dark mode with a nested light mode.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet"
        integrity=
"sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
          crossorigin="anonymous" />
</head>

<body class="m-3">
    <center>
        <div data-bs-theme="dark" 
             class="p-2 mt-2 text-body bg-body">
            <h1 class="text-success">GeeksforGeeks</h1>
            <strong>Bootstrap 5 Nesting Color Modes</strong> <br />
            <p>
                <strong>dark</strong> theme in background.
            </p>

            <div class="dropdown mb-4" data-bs-theme="dark">
                <button class="btn btn-success" type="button" 
                        data-bs-toggle="collapse"
                        data-bs-target="#GFGdefaultcollapse">
                    Light Collapse Button
                </button>

                <div class="collapse" data-bs-theme="light" 
                     id="GFGdefaultcollapse">
                    <div class="card card-body mt-2 mb-2 text-dark">
                        GFG is a Computer Science portal for geeks.
                    </div>
                </div>
            </div>

            <!--This is the div with nested light mode.-->
            <div data-bs-theme="light" 
                 class="p-3 text-body bg-body rounded">
                <h1 class="text-success">GeeksforGeeks</h1>
                <p>
                    <strong>light</strong> theme in background.
                </p>

                <div class="dropdown" data-bs-theme="light">
                    <button class="btn btn-success" type="button" 
                            data-bs-toggle="collapse"
                        data-bs-target="#GFGdarkcollapse">
                        Dark Collapse Button
                    </button>

                    <div class="collapse" data-bs-theme="dark" 
                         id="GFGdarkcollapse">
                        <div class="card card-body mt-2 text-light">
                            GFG is a Computer Science portal for geeks.
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
            integrity=
"sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
            crossorigin="anonymous"></script>
    </center>
</body>

</html>