Bootstrap - 颜色模式


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

  • 灯光模式(默认)

  • 深色模式(新)

  • 创建您自己的自定义模板

深色模式

v5.3.0 引入了一种新的颜色模式,即深色模式。允许使用data-bs-theme属性在<html>元素或任何特定组件和元素上切换颜色模式。

让我们看一个例子:

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

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

概述

  • 颜色模式样式由data-bs-theme属性控制。

  • data -bs-theme属性可以应用于<html>元素或任何其他组件或元素。

  • 如果应用于<html>元素,它将应用于<html>元素范围内的所有内容。

  • 如果应用于特定组件或元素,则其范围将限于该特定组件或元素。

  • 您必须为您想要支持的每种颜色模式添加新的共享全局 CSS 变量的覆盖。使用以下 mixin 来编写颜色模式特定样式:

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

用法

启用深色模式

您可以通过向<html>元素添加data-bs-theme="dark"属性来在整个项目中启用深色模式。此设置将应用于所有组件和元素,但data-bs-theme具有不同值的组件和元素除外。

这可以通过以下代码来实现:

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

自定义颜色模式

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

在颜色模式之间切换

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

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

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