Bootstrap5主題色定製：自定義品牌色與組件顏色

在Web開發中，統一的品牌色能讓網站更具辨識度，而Bootstrap5提供了強大的主題定製能力，讓我們輕鬆打造符合品牌風格的界面。本文將從基礎概念到實操步驟，帶你學會如何自定義Bootstrap5的主題色，包括全局品牌色和組件顏色的精細化調整。

爲什麼要定製主題色？¶

Bootstrap5默認提供了一套基礎配色方案，但在實際項目中，我們常常需要將其與品牌色（如公司Logo色、主色調）結合，讓按鈕、導航欄、卡片等組件都呈現統一的視覺風格。通過定製主題色，不僅能提升品牌一致性，還能減少重複的CSS代碼編寫。

核心：理解Bootstrap5的主題色變量¶

Bootstrap5的主題色主要通過Sass變量控制，這些變量定義了全局和組件的默認顏色。我們最常用的核心變量包括：

$primary：主品牌色，影響按鈕、鏈接、導航欄等核心組件
$secondary：次要輔助色，用於次要按鈕、邊框等
$success/$info/$warning/$danger：功能色，分別對應成功、信息、警告、錯誤狀態
$light/$dark：背景色（淺色和深色背景）
各組件特定變量：如按鈕背景色$btn-primary-bg、文本顏色$text-muted等

步驟1：安裝Bootstrap5的Sass版本¶

要修改主題色，需使用Bootstrap的Sass源文件（而非僅引入CDN的CSS），因爲Sass變量需要通過編譯生成最終CSS。安裝步驟如下：

確保已安裝Node.js（用於管理依賴），打開終端執行：

   npm init -y  # 初始化項目（若已有項目可跳過）
   npm install bootstrap@5 sass --save-dev  # 安裝Bootstrap5和Sass編譯器

   項目根目錄
   ├─ scss/        # 存放自定義Sass文件
   │  └─ custom.scss  # 自定義主題配置
   └─ dist/        # 存放編譯後的CSS文件

步驟2：定製全局品牌色¶

2.1 定義主品牌色¶

假設我們要將主品牌色設爲公司Logo的藍色#4285F4（谷歌藍），步驟如下：

在scss/custom.scss中，先覆蓋Bootstrap的核心變量：

   // 自定義主題變量（必須放在導入Bootstrap之前）
   $primary: #4285F4;  // 主品牌色
   $primary-dark: #3367D6; // 主色的深色（用於按鈕懸停等狀態）
   $secondary: #34A853; // 次要色（可自定義）

   // 導入Bootstrap源文件
   @import "bootstrap/scss/bootstrap";

關鍵點：變量定義必須在@import "bootstrap/..."之前，否則覆蓋無效。

編譯Sass文件：執行以下命令生成CSS（需確保終端在項目根目錄）：

   npx sass scss/custom.scss dist/css/custom.css

執行後，dist/css/custom.css會生成包含自定義主題的CSS文件。

2.2 驗證效果¶

在HTML中引入編譯後的CSS，測試主色是否生效：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="dist/css/custom.css">
</head>
<body>
  <!-- 測試主色按鈕 -->
  <button class="btn btn-primary">主按鈕（主色）</button>
  <button class="btn btn-secondary">次要按鈕（次要色）</button>
  <!-- 測試導航欄 -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="container">
      <a class="navbar-brand" href="#">品牌導航</a>
    </div>
  </nav>
</body>
</html>

此時，按鈕、導航欄等組件應顯示爲自定義的#4285F4主色。

步驟3：精細化組件顏色定製¶

除了全局變量，Bootstrap5還允許針對特定組件調整顏色，以下是常見場景：

3.1 按鈕顏色定製¶

按鈕的背景色和文字色可通過$btn-*系列變量單獨控制。例如：

// 定製主按鈕：背景色#4285F4，文字色白色
$btn-primary-bg: #4285F4;
$btn-primary-color: #ffffff;
$btn-primary-hover-bg: #3367D6; // 懸停時加深

// 定製警告按鈕：背景色#FBBC05，文字色#000000
$btn-warning-bg: #FBBC05;
$btn-warning-color: #000000;

3.2 卡片顏色定製¶

卡片的頭部、底部和邊框色可通過$card-*變量控制：

$card-bg: #f8f9fa; // 卡片背景色
$card-border-color: #dee2e6; // 卡片邊框色
$card-header-bg: $primary; // 卡片頭部背景色（使用主色）

3.3 快速工具類覆蓋（無需修改變量）¶

若僅需臨時修改某個元素的顏色，可直接使用Bootstrap的工具類，無需修改Sass變量：

<!-- 自定義卡片背景色 -->
<div class="card bg-custom" style="background-color: #FF5733;">
  <div class="card-body">
    <h5 class="card-title">自定義卡片</h5>
  </div>
</div>

<!-- 臨時修改文本顏色 -->
<p class="text-success">這是默認成功色</p>
<p class="text-#FF5733">這是自定義文本色</p>

步驟4：進階技巧（深色模式與動態主題）¶

Bootstrap5支持深色模式（Dark Mode），可通過$theme-colors變量生成暗色調：

// 啓用深色模式
$enable-dark-mode: true;
$theme-colors: (
  primary: #4285F4,
  secondary: #34A853,
  dark: #1E293B  // 深色背景色
);

更進階的動態主題可結合CSS變量（:root）實現運行時切換，例如：

:root {
  --primary: #4285F4;
  --primary-dark: #3367D6;
}

注意事項¶

變量優先級：自定義變量必須在導入Bootstrap前定義，否則會被默認值覆蓋。
編譯工具：若使用VSCode，可安裝“Live Sass Compiler”插件自動編譯，提高效率。
官方文檔：如需更多變量列表（如導航欄、表單等），可查閱Bootstrap5主題變量文檔。

通過以上步驟，你已掌握Bootstrap5主題色的定製方法，從全局品牌色到組件細節均可靈活調整。多嘗試修改不同變量，觀察按鈕、導航欄、卡片等組件的變化，很快就能打造出專屬的品牌風格界面！