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

列印頁面