Bootstrap 简明教程

Bootstrap - Color modes

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

light mode (default)
dark mode (new)
创建您自己的定制模板

Dark mode

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

我们看一个示例：

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

<!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

颜色模式样式由 data-bs-theme 属性控制。
data-bs-theme 属性可以应用于 <html> 元素或任何其他组件或元素。
如果应用于 <html> 元素，它将应用于 <html> 元素范围内的所有内容。
如果应用于特定组件或元素，它将被范围限制到该特定组件或元素。
您必须为要支持的每种颜色模式添加共享全局 CSS 变量的新重写。使用以下混合来编写特定于颜色模式的样式：

Usage

Enable dark mode

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

这可以通过以下代码实现：

Custom color modes

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

Toggle between color modes

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

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

<!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>