Bootstrap - Color modes

This chapter discusses about the color modes supported by Bootstrap. The different color modes available are:

  • light mode (default)

  • dark mode (new)

  • create your own custom template

Dark mode

With v5.3.0, a new color mode is introduced, i.e. the dark mode. Toggling of color modes on <html> element or on any specific components and elements is allowed, using the data-bs-theme attribute.

Let us see an example:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Color modes</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
	  <h1 class="text-center">Color mode - dark</h1>
		<center>
			<div class="dropdown" data-bs-theme="light">
				<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButtonLight" data-bs-toggle="dropdown" aria-expanded="false">
				  Light mode dropdown
				</button>
				<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLight">
				  <li><a class="dropdown-item active" href="#">Item 1</a></li>
				  <li><a class="dropdown-item" href="#">Item 2</a></li>
				  <li><a class="dropdown-item" href="#">Item 3</a></li>
				  <li><a class="dropdown-item" href="#">Item 4</a></li>
				  <li><hr class="dropdown-divider"></li>
				  <li><a class="dropdown-item" href="#">Total items</a></li>
				</ul>
			  </div>
			  
			  <div class="dropdown" data-bs-theme="dark">
				<button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuButtonDark" data-bs-toggle="dropdown" aria-expanded="false">
				  Dark mode dropdown
				</button>
				<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonDark">
					<li><a class="dropdown-item active" href="#">Item 1</a></li>
					<li><a class="dropdown-item" href="#">Item 2</a></li>
					<li><a class="dropdown-item" href="#">Item 3</a></li>
					<li><a class="dropdown-item" href="#">Item 4</a></li>
					<li><hr class="dropdown-divider"></li>
					<li><a class="dropdown-item" href="#">Total items</a></li>
				</ul>
			  </div>
		</center>
	  </body>
</html>

Overview

  • Color mode styles are controlled by the data-bs-theme attribute.

  • The data-bs-theme atrribute can be applied on <html> element or any other component or element.

  • If applied on <html> element, it will apply to everything under the scope of <html> element.

  • If applied to a specific component or element, it will be scoped to that particular component or element.

  • You will have to add new overrides for the shared global CSS variables, for each color mode you want to support. Use the following mixin to write the color mode specific style:

    •             // Color mode variables in _root.scss
            @include color-mode(dark) {
            // CSS variable overrides here...
            }

Usage

Enable dark mode

You can enable the dark mode across your project by adding data-bs-theme="dark" attribute to the <html> element. This setting will be applied to all the components and elements, except for those that have a different value for data-bs-theme.

This can be achieved by the following code:

    <!DOCTYPE html>
    <html lang="en" data-bs-theme="dark">
    <head>
        <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>Bootstrap color mode</title>
            <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
            </head>
        <body>
            <h1>Hello, world!</h1>
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
            </body>
    </html>

Custom color modes

Apart from light and dark mode, you can also create your own custom color mode. You can create your own data-bs-theme selector with a custom value, and modidy the Sass and CSS variables.

Toggle between color modes

You can switch or toggle between the dark and light mode using CSS and JavaScript. Here is an example shown below:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Color modes</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>

    <style>
        body {
        padding: 25px;
        background-color: white;
        color: black;
        font-size: 25px;
        }

        .dark-mode {
        background-color: black;
        color: white;
        }
    </style>
  </head>
  <body>
        <h2>Toggle Dark/Light Mode</h2>
        <p>Click the button to toggle between dark and light mode for this page.</p>

        <button onclick="myFunction()">Toggle dark mode</button>

        <script>
        function myFunction() {
        var element = document.body;
        element.classList.toggle("dark-mode");
        }
        </script>
  </body>
</html>
Advertisements