Bootstrap 简明教程

Bootstrap - Color modes

本章讨论了 Bootstrap 支持的颜色模式。可用的不同颜色模式有：

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

从 v5.3.0 开始，引入了新的颜色模式，即暗模式。可以使用 data-bs-theme 属性在 <html> 元素或任何特定组件和元素上切换颜色模式。

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:

Usage

Enable dark mode

可以通过为 <html> 元素添加 data-bs-theme="dark" 属性来启用项目的黑暗模式。此设置将应用到所有组件和元素，但不包括对 data-bs-theme 有不同值的部分。

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:

Custom color modes

除了浅色和深色模式，您还可以创建自己的自定义颜色模式。您可以使用一个自定义值创建自己的 data-bs-theme 选择器，并修改 Sass 和 CSS 变量。

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

您可以使用 CSS 和 JavaScript 在黑暗和浅色模式之间切换或切换。以下是一个示例：

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>