My Blog

  Color modes

—

by

Yousaf Saleem
in

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:https://www.tutorialspoint.com/bootstrap/examples/color_mode_dark.php

Example

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

Open Compiler

<!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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/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:

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

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/[email protected]/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/[email protected]/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:https://www.tutorialspoint.com/bootstrap/examples/color_mode_toggle.php

Example

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

Open Compiler

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Color modes</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="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.

Open Compiler
<!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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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...
            }
        
Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

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/[email protected]/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/[email protected]/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.

Open Compiler
viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *