📚 颜色系统与主题定制

本章概述

Bootstrap 5 提供了一套完整的颜色系统，包括语义化颜色、工具类颜色以及强大的主题定制功能。本章将深入介绍如何使用 Bootstrap 的颜色系统，以及如何通过 CSS 变量和 Sass 变量来定制自己的主题。

Bootstrap 颜色系统基础

1. 主题颜色

Bootstrap 定义了一套语义化的主题颜色，每种颜色都有特定的含义和用途：

<!-- 主题颜色示例 -->
<div class="container my-4">
    <div class="row g-3">
        <div class="col-6 col-md-4 col-lg-3">
            <div class="p-3 bg-primary text-white text-center rounded">
                Primary
            </div>
        </div>
        <div class="col-6 col-md-4 col-lg-3">
            <div class="p-3 bg-secondary text-white text-center rounded">
                Secondary
            </div>
        </div>
        <div class="col-6 col-md-4 col-lg-3">
            <div class="p-3 bg-success text-white text-center rounded">
                Success
            </div>
        </div>
        <div class="col-6 col-md-4 col-lg-3">
            <div class="p-3 bg-danger text-white text-center rounded">
                Danger
            </div>
        </div>
        <div class="col-6 col-md-4 col-lg-3">
            <div class="p-3 bg-warning text-dark text-center rounded">
                Warning
            </div>
        </div>
        <div class="col-6 col-md-4 col-lg-3">
            <div class="p-3 bg-info text-dark text-center rounded">
                Info
            </div>
        </div>
        <div class="col-6 col-md-4 col-lg-3">
            <div class="p-3 bg-light text-dark text-center rounded border">
                Light
            </div>
        </div>
        <div class="col-6 col-md-4 col-lg-3">
            <div class="p-3 bg-dark text-white text-center rounded">
                Dark
            </div>
        </div>
    </div>
</div>

2. 颜色含义和使用场景

<!-- 颜色使用场景示例 -->
<div class="container my-4">
    <!-- Primary - 主要操作 -->
    <div class="mb-3">
        <button class="btn btn-primary">主要按钮</button>
        <a href="#" class="link-primary">主要链接</a>
        <div class="alert alert-primary" role="alert">
            这是一个主要信息提示
        </div>
    </div>
    
    <!-- Success - 成功状态 -->
    <div class="mb-3">
        <button class="btn btn-success">成功按钮</button>
        <span class="badge bg-success">成功</span>
        <div class="alert alert-success" role="alert">
            <i class="bi bi-check-circle"></i> 操作成功完成！
        </div>
    </div>
    
    <!-- Danger - 危险/错误状态 -->
    <div class="mb-3">
        <button class="btn btn-danger">删除按钮</button>
        <span class="badge bg-danger">错误</span>
        <div class="alert alert-danger" role="alert">
            <i class="bi bi-exclamation-triangle"></i> 发生了一个错误！
        </div>
    </div>
    
    <!-- Warning - 警告状态 -->
    <div class="mb-3">
        <button class="btn btn-warning">警告按钮</button>
        <span class="badge bg-warning text-dark">警告</span>
        <div class="alert alert-warning" role="alert">
            <i class="bi bi-exclamation-circle"></i> 请注意这个重要信息！
        </div>
    </div>
    
    <!-- Info - 信息状态 -->
    <div class="mb-3">
        <button class="btn btn-info">信息按钮</button>
        <span class="badge bg-info text-dark">信息</span>
        <div class="alert alert-info" role="alert">
            <i class="bi bi-info-circle"></i> 这里有一些有用的信息。
        </div>
    </div>
</div>

3. 灰度颜色系统

<!-- 灰度颜色示例 -->
<div class="container my-4">
    <div class="row g-2">
        <div class="col-6 col-md-3">
            <div class="p-3 bg-white text-dark text-center border rounded">
                White
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="p-3 text-dark text-center rounded" style="background-color: var(--bs-gray-100)">
                Gray 100
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="p-3 text-dark text-center rounded" style="background-color: var(--bs-gray-200)">
                Gray 200
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="p-3 text-dark text-center rounded" style="background-color: var(--bs-gray-300)">
                Gray 300
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="p-3 text-dark text-center rounded" style="background-color: var(--bs-gray-400)">
                Gray 400
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="p-3 text-white text-center rounded" style="background-color: var(--bs-gray-500)">
                Gray 500
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="p-3 text-white text-center rounded" style="background-color: var(--bs-gray-600)">
                Gray 600
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="p-3 text-white text-center rounded" style="background-color: var(--bs-gray-700)">
                Gray 700
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="p-3 text-white text-center rounded" style="background-color: var(--bs-gray-800)">
                Gray 800
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="p-3 text-white text-center rounded" style="background-color: var(--bs-gray-900)">
                Gray 900
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="p-3 bg-black text-white text-center rounded">
                Black
            </div>
        </div>
    </div>
</div>

背景颜色工具类

1. 基础背景颜色

<!-- 背景颜色工具类 -->
<div class="container my-4">
    <div class="row g-3">
        <div class="col-12">
            <h4>主题背景颜色</h4>
        </div>
        <div class="col-6 col-md-4">
            <div class="p-3 bg-primary text-white rounded">.bg-primary</div>
        </div>
        <div class="col-6 col-md-4">
            <div class="p-3 bg-secondary text-white rounded">.bg-secondary</div>
        </div>
        <div class="col-6 col-md-4">
            <div class="p-3 bg-success text-white rounded">.bg-success</div>
        </div>
        <div class="col-6 col-md-4">
            <div class="p-3 bg-danger text-white rounded">.bg-danger</div>
        </div>
        <div class="col-6 col-md-4">
            <div class="p-3 bg-warning text-dark rounded">.bg-warning</div>
        </div>
        <div class="col-6 col-md-4">
            <div class="p-3 bg-info text-dark rounded">.bg-info</div>
        </div>
        <div class="col-6 col-md-4">
            <div class="p-3 bg-light text-dark rounded border">.bg-light</div>
        </div>
        <div class="col-6 col-md-4">
            <div class="p-3 bg-dark text-white rounded">.bg-dark</div>
        </div>
        <div class="col-6 col-md-4">
            <div class="p-3 bg-body text-body rounded border">.bg-body</div>
        </div>
        <div class="col-6 col-md-4">
            <div class="p-3 bg-white text-dark rounded border">.bg-white</div>
        </div>
        <div class="col-6 col-md-4">
            <div class="p-3 bg-transparent text-dark rounded border">.bg-transparent</div>
        </div>
    </div>
</div>

2. 背景颜色透明度

<!-- 背景颜色透明度 -->
<div class="container my-4">
    <div class="row g-3">
        <div class="col-12">
            <h4>背景颜色透明度</h4>
        </div>
        <div class="col-6 col-md-4">
            <div class="p-3 bg-primary bg-opacity-10 text-dark rounded border">.bg-primary.bg-opacity-10</div>
        </div>
        <div class="col-6 col-md-4">
            <div class="p-3 bg-primary bg-opacity-25 text-dark rounded">.bg-primary.bg-opacity-25</div>
        </div>
        <div class="col-6 col-md-4">
            <div class="p-3 bg-primary bg-opacity-50 text-white rounded">.bg-primary.bg-opacity-50</div>
        </div>
        <div class="col-6 col-md-4">
            <div class="p-3 bg-primary bg-opacity-75 text-white rounded">.bg-primary.bg-opacity-75</div>
        </div>
        <div class="col-6 col-md-4">
            <div class="p-3 bg-primary text-white rounded">.bg-primary</div>
        </div>
    </div>
    
    <!-- 其他颜色的透明度示例 -->
    <div class="row g-3 mt-3">
        <div class="col-6 col-md-4">
            <div class="p-3 bg-success bg-opacity-25 text-dark rounded">.bg-success.bg-opacity-25</div>
        </div>
        <div class="col-6 col-md-4">
            <div class="p-3 bg-danger bg-opacity-25 text-dark rounded">.bg-danger.bg-opacity-25</div>
        </div>
        <div class="col-6 col-md-4">
            <div class="p-3 bg-warning bg-opacity-25 text-dark rounded">.bg-warning.bg-opacity-25</div>
        </div>
    </div>
</div>

3. 渐变背景

<!-- 渐变背景 -->
<div class="container my-4">
    <div class="row g-3">
        <div class="col-12">
            <h4>渐变背景</h4>
        </div>
        <div class="col-6 col-md-4">
            <div class="p-3 bg-primary bg-gradient text-white rounded">.bg-primary.bg-gradient</div>
        </div>
        <div class="col-6 col-md-4">
            <div class="p-3 bg-secondary bg-gradient text-white rounded">.bg-secondary.bg-gradient</div>
        </div>
        <div class="col-6 col-md-4">
            <div class="p-3 bg-success bg-gradient text-white rounded">.bg-success.bg-gradient</div>
        </div>
        <div class="col-6 col-md-4">
            <div class="p-3 bg-danger bg-gradient text-white rounded">.bg-danger.bg-gradient</div>
        </div>
        <div class="col-6 col-md-4">
            <div class="p-3 bg-warning bg-gradient text-dark rounded">.bg-warning.bg-gradient</div>
        </div>
        <div class="col-6 col-md-4">
            <div class="p-3 bg-info bg-gradient text-dark rounded">.bg-info.bg-gradient</div>
        </div>
    </div>
</div>

文本颜色工具类

1. 基础文本颜色

<!-- 文本颜色工具类 -->
<div class="container my-4">
    <div class="row">
        <div class="col-12">
            <h4>文本颜色</h4>
            <p class="text-primary">.text-primary</p>
            <p class="text-primary-emphasis">.text-primary-emphasis</p>
            <p class="text-secondary">.text-secondary</p>
            <p class="text-secondary-emphasis">.text-secondary-emphasis</p>
            <p class="text-success">.text-success</p>
            <p class="text-success-emphasis">.text-success-emphasis</p>
            <p class="text-danger">.text-danger</p>
            <p class="text-danger-emphasis">.text-danger-emphasis</p>
            <p class="text-warning">.text-warning</p>
            <p class="text-warning-emphasis">.text-warning-emphasis</p>
            <p class="text-info">.text-info</p>
            <p class="text-info-emphasis">.text-info-emphasis</p>
            <p class="text-light bg-dark p-2 rounded">.text-light</p>
            <p class="text-light-emphasis bg-dark p-2 rounded">.text-light-emphasis</p>
            <p class="text-dark">.text-dark</p>
            <p class="text-dark-emphasis">.text-dark-emphasis</p>
            <p class="text-body">.text-body</p>
            <p class="text-body-emphasis">.text-body-emphasis</p>
            <p class="text-body-secondary">.text-body-secondary</p>
            <p class="text-body-tertiary">.text-body-tertiary</p>
            <p class="text-black">.text-black</p>
            <p class="text-white bg-dark p-2 rounded">.text-white</p>
            <p class="text-muted">.text-muted</p>
        </div>
    </div>
</div>

2. 文本颜色透明度

<!-- 文本颜色透明度 -->
<div class="container my-4">
    <div class="row">
        <div class="col-12">
            <h4>文本颜色透明度</h4>
            <p class="text-primary text-opacity-75">.text-primary.text-opacity-75</p>
            <p class="text-primary text-opacity-50">.text-primary.text-opacity-50</p>
            <p class="text-primary text-opacity-25">.text-primary.text-opacity-25</p>
            <p class="text-success text-opacity-75">.text-success.text-opacity-75</p>
            <p class="text-danger text-opacity-50">.text-danger.text-opacity-50</p>
            <p class="text-warning text-opacity-75">.text-warning.text-opacity-75</p>
        </div>
    </div>
</div>

3. 链接颜色

<!-- 链接颜色 -->
<div class="container my-4">
    <div class="row">
        <div class="col-12">
            <h4>链接颜色</h4>
            <p><a href="#" class="link-primary">Primary link</a></p>
            <p><a href="#" class="link-secondary">Secondary link</a></p>
            <p><a href="#" class="link-success">Success link</a></p>
            <p><a href="#" class="link-danger">Danger link</a></p>
            <p><a href="#" class="link-warning">Warning link</a></p>
            <p><a href="#" class="link-info">Info link</a></p>
            <p><a href="#" class="link-light bg-dark p-2 rounded d-inline-block">Light link</a></p>
            <p><a href="#" class="link-dark">Dark link</a></p>
            <p><a href="#" class="link-body-emphasis">Emphasis link</a></p>
        </div>
    </div>
</div>

边框颜色工具类

1. 基础边框颜色

<!-- 边框颜色工具类 -->
<div class="container my-4">
    <div class="row g-3">
        <div class="col-12">
            <h4>边框颜色</h4>
        </div>
        <div class="col-6 col-md-4">
            <div class="p-3 border border-primary rounded">.border-primary</div>
        </div>
        <div class="col-6 col-md-4">
            <div class="p-3 border border-secondary rounded">.border-secondary</div>
        </div>
        <div class="col-6 col-md-4">
            <div class="p-3 border border-success rounded">.border-success</div>
        </div>
        <div class="col-6 col-md-4">
            <div class="p-3 border border-danger rounded">.border-danger</div>
        </div>
        <div class="col-6 col-md-4">
            <div class="p-3 border border-warning rounded">.border-warning</div>
        </div>
        <div class="col-6 col-md-4">
            <div class="p-3 border border-info rounded">.border-info</div>
        </div>
        <div class="col-6 col-md-4">
            <div class="p-3 border border-light rounded">.border-light</div>
        </div>
        <div class="col-6 col-md-4">
            <div class="p-3 border border-dark rounded">.border-dark</div>
        </div>
        <div class="col-6 col-md-4">
            <div class="p-3 border border-white bg-dark text-white rounded">.border-white</div>
        </div>
    </div>
</div>

2. 边框透明度

<!-- 边框透明度 -->
<div class="container my-4">
    <div class="row g-3">
        <div class="col-12">
            <h4>边框透明度</h4>
        </div>
        <div class="col-6 col-md-4">
            <div class="p-3 border border-primary border-opacity-10 rounded">.border-primary.border-opacity-10</div>
        </div>
        <div class="col-6 col-md-4">
            <div class="p-3 border border-primary border-opacity-25 rounded">.border-primary.border-opacity-25</div>
        </div>
        <div class="col-6 col-md-4">
            <div class="p-3 border border-primary border-opacity-50 rounded">.border-primary.border-opacity-50</div>
        </div>
        <div class="col-6 col-md-4">
            <div class="p-3 border border-primary border-opacity-75 rounded">.border-primary.border-opacity-75</div>
        </div>
        <div class="col-6 col-md-4">
            <div class="p-3 border border-primary rounded">.border-primary</div>
        </div>
    </div>
</div>

CSS 变量系统

1. Bootstrap CSS 变量

Bootstrap 5 使用 CSS 自定义属性（变量）来定义颜色，这使得主题定制变得更加灵活：

/* Bootstrap 5 默认 CSS 变量 */
:root {
    /* 主题颜色 */
    --bs-primary: #0d6efd;
    --bs-primary-rgb: 13, 110, 253;
    --bs-secondary: #6c757d;
    --bs-secondary-rgb: 108, 117, 125;
    --bs-success: #198754;
    --bs-success-rgb: 25, 135, 84;
    --bs-danger: #dc3545;
    --bs-danger-rgb: 220, 53, 69;
    --bs-warning: #ffc107;
    --bs-warning-rgb: 255, 193, 7;
    --bs-info: #0dcaf0;
    --bs-info-rgb: 13, 202, 240;
    --bs-light: #f8f9fa;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark: #212529;
    --bs-dark-rgb: 33, 37, 41;
    
    /* 灰度颜色 */
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-black: #000;
    
    /* 文本颜色 */
    --bs-body-color: #212529;
    --bs-body-color-rgb: 33, 37, 41;
    --bs-body-bg: #fff;
    --bs-body-bg-rgb: 255, 255, 255;
    
    /* 边框颜色 */
    --bs-border-color: #dee2e6;
    --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
}

2. 使用 CSS 变量自定义颜色

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义颜色主题</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* 自定义主题颜色 */
        .theme-purple {
            --bs-primary: #6f42c1;
            --bs-primary-rgb: 111, 66, 193;
            --bs-secondary: #e83e8c;
            --bs-secondary-rgb: 232, 62, 140;
            --bs-success: #20c997;
            --bs-success-rgb: 32, 201, 151;
        }
        
        .theme-orange {
            --bs-primary: #fd7e14;
            --bs-primary-rgb: 253, 126, 20;
            --bs-secondary: #6c757d;
            --bs-secondary-rgb: 108, 117, 125;
            --bs-success: #198754;
            --bs-success-rgb: 25, 135, 84;
        }
        
        .theme-dark {
            --bs-primary: #375a7f;
            --bs-primary-rgb: 55, 90, 127;
            --bs-secondary: #444;
            --bs-secondary-rgb: 68, 68, 68;
            --bs-body-color: #fff;
            --bs-body-color-rgb: 255, 255, 255;
            --bs-body-bg: #222;
            --bs-body-bg-rgb: 34, 34, 34;
            --bs-border-color: #444;
        }
    </style>
</head>
<body>
    <div class="container my-5">
        <!-- 默认主题 -->
        <div class="mb-5">
            <h2>默认主题</h2>
            <div class="row g-3">
                <div class="col-auto">
                    <button class="btn btn-primary">Primary</button>
                </div>
                <div class="col-auto">
                    <button class="btn btn-secondary">Secondary</button>
                </div>
                <div class="col-auto">
                    <button class="btn btn-success">Success</button>
                </div>
            </div>
        </div>
        
        <!-- 紫色主题 -->
        <div class="theme-purple mb-5">
            <h2>紫色主题</h2>
            <div class="row g-3">
                <div class="col-auto">
                    <button class="btn btn-primary">Primary</button>
                </div>
                <div class="col-auto">
                    <button class="btn btn-secondary">Secondary</button>
                </div>
                <div class="col-auto">
                    <button class="btn btn-success">Success</button>
                </div>
            </div>
        </div>
        
        <!-- 橙色主题 -->
        <div class="theme-orange mb-5">
            <h2>橙色主题</h2>
            <div class="row g-3">
                <div class="col-auto">
                    <button class="btn btn-primary">Primary</button>
                </div>
                <div class="col-auto">
                    <button class="btn btn-secondary">Secondary</button>
                </div>
                <div class="col-auto">
                    <button class="btn btn-success">Success</button>
                </div>
            </div>
        </div>
        
        <!-- 深色主题 -->
        <div class="theme-dark p-4 rounded">
            <h2>深色主题</h2>
            <div class="row g-3">
                <div class="col-auto">
                    <button class="btn btn-primary">Primary</button>
                </div>
                <div class="col-auto">
                    <button class="btn btn-secondary">Secondary</button>
                </div>
                <div class="col-auto">
                    <button class="btn btn-success">Success</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

深色模式支持

1. Bootstrap 5.3+ 深色模式

<!DOCTYPE html>
<html lang="zh-CN" data-bs-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>深色模式示例</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container my-5">
        <!-- 主题切换器 -->
        <div class="mb-4">
            <h2>主题切换</h2>
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-outline-primary" onclick="setTheme('light')">
                    <i class="bi bi-sun"></i> 浅色模式
                </button>
                <button type="button" class="btn btn-outline-primary" onclick="setTheme('dark')">
                    <i class="bi bi-moon"></i> 深色模式
                </button>
                <button type="button" class="btn btn-outline-primary" onclick="setTheme('auto')">
                    <i class="bi bi-circle-half"></i> 自动
                </button>
            </div>
        </div>
        
        <!-- 示例内容 -->
        <div class="row g-4">
            <div class="col-12 col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">卡片标题</h5>
                    </div>
                    <div class="card-body">
                        <p class="card-text">这是一个示例卡片，展示深色模式下的外观。</p>
                        <button class="btn btn-primary">主要按钮</button>
                        <button class="btn btn-outline-secondary">次要按钮</button>
                    </div>
                </div>
            </div>
            
            <div class="col-12 col-md-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">表单示例</h5>
                        <form>
                            <div class="mb-3">
                                <label for="email" class="form-label">邮箱地址</label>
                                <input type="email" class="form-control" id="email" placeholder="输入邮箱">
                            </div>
                            <div class="mb-3">
                                <label for="message" class="form-label">消息</label>
                                <textarea class="form-control" id="message" rows="3" placeholder="输入消息"></textarea>
                            </div>
                            <button type="submit" class="btn btn-success">提交</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 警告框示例 -->
        <div class="row g-3 mt-4">
            <div class="col-12">
                <h3>警告框示例</h3>
            </div>
            <div class="col-12 col-md-6">
                <div class="alert alert-primary" role="alert">
                    这是一个主要信息警告框。
                </div>
            </div>
            <div class="col-12 col-md-6">
                <div class="alert alert-success" role="alert">
                    这是一个成功信息警告框。
                </div>
            </div>
            <div class="col-12 col-md-6">
                <div class="alert alert-warning" role="alert">
                    这是一个警告信息警告框。
                </div>
            </div>
            <div class="col-12 col-md-6">
                <div class="alert alert-danger" role="alert">
                    这是一个危险信息警告框。
                </div>
            </div>
        </div>
    </div>
    
    <script>
        function setTheme(theme) {
            document.documentElement.setAttribute('data-bs-theme', theme);
            localStorage.setItem('theme', theme);
        }
        
        // 页面加载时恢复主题设置
        document.addEventListener('DOMContentLoaded', function() {
            const savedTheme = localStorage.getItem('theme') || 'light';
            setTheme(savedTheme);
        });
    </script>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

2. 自定义深色模式样式

/* 自定义深色模式样式 */
[data-bs-theme="dark"] {
    /* 自定义深色模式颜色 */
    --bs-body-color: #e9ecef;
    --bs-body-bg: #1a1a1a;
    --bs-emphasis-color: #ffffff;
    --bs-secondary-color: rgba(233, 236, 239, 0.75);
    --bs-tertiary-color: rgba(233, 236, 239, 0.5);
    --bs-border-color: #404040;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
    
    /* 自定义主题颜色 */
    --bs-primary: #4dabf7;
    --bs-primary-rgb: 77, 171, 247;
    --bs-secondary: #6c757d;
    --bs-secondary-rgb: 108, 117, 125;
    --bs-success: #51cf66;
    --bs-success-rgb: 81, 207, 102;
    --bs-danger: #ff6b6b;
    --bs-danger-rgb: 255, 107, 107;
    --bs-warning: #ffd43b;
    --bs-warning-rgb: 255, 212, 59;
    --bs-info: #74c0fc;
    --bs-info-rgb: 116, 192, 252;
}

/* 深色模式下的卡片样式 */
[data-bs-theme="dark"] .card {
    background-color: #2d2d2d;
    border-color: #404040;
}

/* 深色模式下的表单控件 */
[data-bs-theme="dark"] .form-control {
    background-color: #2d2d2d;
    border-color: #404040;
    color: #e9ecef;
}

[data-bs-theme="dark"] .form-control:focus {
    background-color: #2d2d2d;
    border-color: var(--bs-primary);
    color: #e9ecef;
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

/* 深色模式下的导航栏 */
[data-bs-theme="dark"] .navbar-light {
    background-color: #2d2d2d !important;
}

[data-bs-theme="dark"] .navbar-light .navbar-nav .nav-link {
    color: #e9ecef;
}

[data-bs-theme="dark"] .navbar-light .navbar-nav .nav-link:hover {
    color: var(--bs-primary);
}

Sass 变量定制

1. 基础 Sass 变量

// 自定义 Bootstrap Sass 变量
// _custom-variables.scss

// 主题颜色定制
$primary: #6f42c1;
$secondary: #e83e8c;
$success: #20c997;
$info: #17a2b8;
$warning: #ffc107;
$danger: #dc3545;
$light: #f8f9fa;
$dark: #343a40;

// 灰度颜色定制
$white: #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black: #000;

// 字体定制
$font-family-sans-serif: "Helvetica Neue", Arial, "Noto Sans", sans-serif;
$font-family-monospace: "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
$font-size-base: 1rem;
$font-weight-lighter: lighter;
$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-semibold: 600;
$font-weight-bold: 700;
$font-weight-bolder: bolder;

// 间距定制
$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * 0.25,
  2: $spacer * 0.5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
  6: $spacer * 4,
  7: $spacer * 5
);

// 边框定制
$border-width: 1px;
$border-color: $gray-300;
$border-radius: 0.375rem;
$border-radius-sm: 0.25rem;
$border-radius-lg: 0.5rem;
$border-radius-xl: 1rem;
$border-radius-2xl: 2rem;
$border-radius-pill: 50rem;

// 阴影定制
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15);
$box-shadow-sm: 0 0.125rem 0.25rem rgba($black, 0.075);
$box-shadow-lg: 0 1rem 3rem rgba($black, 0.175);
$box-shadow-inset: inset 0 1px 2px rgba($black, 0.075);

// 组件定制
$component-active-color: $white;
$component-active-bg: $primary;

// 链接定制
$link-color: $primary;
$link-decoration: underline;
$link-hover-color: darken($link-color, 15%);
$link-hover-decoration: null;

// 按钮定制
$btn-padding-y: 0.375rem;
$btn-padding-x: 0.75rem;
$btn-font-family: null;
$btn-font-size: $font-size-base;
$btn-line-height: $line-height-base;
$btn-white-space: null;
$btn-padding-y-sm: 0.25rem;
$btn-padding-x-sm: 0.5rem;
$btn-font-size-sm: $font-size-sm;
$btn-padding-y-lg: 0.5rem;
$btn-padding-x-lg: 1rem;
$btn-font-size-lg: $font-size-lg;
$btn-border-width: $border-width;
$btn-font-weight: $font-weight-normal;
$btn-box-shadow: inset 0 1px 0 rgba($white, 0.15), 0 1px 1px rgba($black, 0.075);
$btn-focus-width: 0.2rem;
$btn-focus-box-shadow: 0 0 0 $btn-focus-width rgba($component-active-bg, 0.5);
$btn-disabled-opacity: 0.65;
$btn-active-box-shadow: inset 0 3px 5px rgba($black, 0.125);
$btn-link-color: $link-color;
$btn-link-hover-color: $link-hover-color;
$btn-link-disabled-color: $gray-600;
$btn-border-radius: $border-radius;
$btn-border-radius-sm: $border-radius-sm;
$btn-border-radius-lg: $border-radius-lg;
$btn-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

// 导入 Bootstrap
@import "~bootstrap/scss/bootstrap";

2. 编译自定义主题

// main.scss - 主样式文件

// 1. 首先导入自定义变量
@import "custom-variables";

// 2. 导入 Bootstrap
@import "~bootstrap/scss/bootstrap";

// 3. 添加自定义样式
@import "custom-components";

// _custom-components.scss - 自定义组件样式

// 自定义按钮变体
.btn-gradient-primary {
  @include button-variant(
    $primary,
    $primary,
    $hover-background: darken($primary, 7.5%),
    $hover-border: darken($primary, 10%),
    $active-background: darken($primary, 10%),
    $active-border: darken($primary, 12.5%)
  );
  background: linear-gradient(45deg, $primary, lighten($primary, 10%));
  border: none;
  
  &:hover {
    background: linear-gradient(45deg, darken($primary, 5%), lighten($primary, 5%));
  }
}

// 自定义卡片样式
.card-custom {
  border: none;
  box-shadow: 0 0.125rem 0.25rem rgba($black, 0.075);
  transition: box-shadow 0.15s ease-in-out;
  
  &:hover {
    box-shadow: 0 0.5rem 1rem rgba($black, 0.15);
  }
  
  .card-header {
    background: linear-gradient(135deg, $primary, lighten($primary, 10%));
    color: $white;
    border-bottom: none;
  }
}

// 自定义导航栏
.navbar-custom {
  background: linear-gradient(135deg, $primary, $secondary);
  
  .navbar-brand,
  .navbar-nav .nav-link {
    color: $white;
    
    &:hover {
      color: rgba($white, 0.8);
    }
  }
}

// 自定义表单控件
.form-control-custom {
  border: 2px solid $gray-300;
  border-radius: $border-radius-lg;
  padding: 0.75rem 1rem;
  
  &:focus {
    border-color: $primary;
    box-shadow: 0 0 0 0.2rem rgba($primary, 0.25);
  }
}

// 自定义警告框
.alert-custom {
  border: none;
  border-left: 4px solid;
  border-radius: 0;
  
  &.alert-primary {
    border-left-color: $primary;
    background-color: rgba($primary, 0.1);
  }
  
  &.alert-success {
    border-left-color: $success;
    background-color: rgba($success, 0.1);
  }
  
  &.alert-danger {
    border-left-color: $danger;
    background-color: rgba($danger, 0.1);
  }
}

实际应用案例

1. 企业品牌主题

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业品牌主题示例</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* 企业品牌颜色定制 */
        :root {
            --bs-primary: #1e3a8a;
            --bs-primary-rgb: 30, 58, 138;
            --bs-secondary: #64748b;
            --bs-secondary-rgb: 100, 116, 139;
            --bs-success: #059669;
            --bs-success-rgb: 5, 150, 105;
            --bs-warning: #d97706;
            --bs-warning-rgb: 217, 119, 6;
            --bs-danger: #dc2626;
            --bs-danger-rgb: 220, 38, 38;
            --bs-info: #0284c7;
            --bs-info-rgb: 2, 132, 199;
        }
        
        /* 自定义组件样式 */
        .hero-section {
            background: linear-gradient(135deg, var(--bs-primary), #3b82f6);
            color: white;
            padding: 4rem 0;
        }
        
        .feature-card {
            border: none;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }
        
        .feature-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, var(--bs-primary), var(--bs-info));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.5rem;
            margin: 0 auto 1rem;
        }
        
        .btn-brand {
            background: linear-gradient(135deg, var(--bs-primary), var(--bs-info));
            border: none;
            color: white;
            padding: 0.75rem 2rem;
            border-radius: 50px;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        
        .btn-brand:hover {
            background: linear-gradient(135deg, #1e40af, #0284c7);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(30, 58, 138, 0.4);
            color: white;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand fw-bold" href="#">企业品牌</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">产品</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">服务</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">关于我们</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">联系我们</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    
    <!-- 英雄区域 -->
    <section class="hero-section">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <h1 class="display-4 fw-bold mb-4">创新解决方案</h1>
                    <p class="lead mb-4">
                        我们提供最先进的技术解决方案，帮助您的企业在数字化时代取得成功。
                        专业、可靠、创新是我们的核心价值。
                    </p>
                    <div class="d-flex gap-3">
                        <button class="btn btn-brand">了解更多</button>
                        <button class="btn btn-outline-light">联系我们</button>
                    </div>
                </div>
                <div class="col-lg-6">
                    <img src="https://via.placeholder.com/600x400" class="img-fluid rounded" alt="企业形象">
                </div>
            </div>
        </div>
    </section>
    
    <!-- 特性展示 -->
    <section class="py-5">
        <div class="container">
            <div class="row mb-5">
                <div class="col-12 text-center">
                    <h2 class="display-5 fw-bold text-primary mb-3">我们的优势</h2>
                    <p class="lead text-muted">
                        专业的团队，先进的技术，为您提供最优质的服务
                    </p>
                </div>
            </div>
            
            <div class="row g-4">
                <div class="col-md-4">
                    <div class="card feature-card h-100 text-center p-4">
                        <div class="feature-icon">
                            <i class="bi bi-lightning"></i>
                        </div>
                        <h5 class="card-title text-primary">高效快速</h5>
                        <p class="card-text text-muted">
                            采用最新技术栈，确保项目快速交付，
                            提升您的业务效率和竞争力。
                        </p>
                    </div>
                </div>
                
                <div class="col-md-4">
                    <div class="card feature-card h-100 text-center p-4">
                        <div class="feature-icon">
                            <i class="bi bi-shield-check"></i>
                        </div>
                        <h5 class="card-title text-primary">安全可靠</h5>
                        <p class="card-text text-muted">
                            严格的安全标准和质量控制，
                            确保您的数据和业务安全无忧。
                        </p>
                    </div>
                </div>
                
                <div class="col-md-4">
                    <div class="card feature-card h-100 text-center p-4">
                        <div class="feature-icon">
                            <i class="bi bi-people"></i>
                        </div>
                        <h5 class="card-title text-primary">专业团队</h5>
                        <p class="card-text text-muted">
                            经验丰富的专业团队，
                            为您提供全方位的技术支持和服务。
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- 统计数据 -->
    <section class="bg-light py-5">
        <div class="container">
            <div class="row text-center">
                <div class="col-md-3 mb-4">
                    <div class="h2 text-primary fw-bold">500+</div>
                    <p class="text-muted">成功项目</p>
                </div>
                <div class="col-md-3 mb-4">
                    <div class="h2 text-success fw-bold">98%</div>
                    <p class="text-muted">客户满意度</p>
                </div>
                <div class="col-md-3 mb-4">
                    <div class="h2 text-info fw-bold">24/7</div>
                    <p class="text-muted">技术支持</p>
                </div>
                <div class="col-md-3 mb-4">
                    <div class="h2 text-warning fw-bold">5年</div>
                    <p class="text-muted">行业经验</p>
                </div>
            </div>
        </div>
    </section>
    
    <!-- 行动号召 -->
    <section class="bg-primary text-white py-5">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-8">
                    <h3 class="h2 mb-2">准备开始您的项目了吗？</h3>
                    <p class="lead mb-0">
                        联系我们的专业团队，获取免费咨询和项目评估。
                    </p>
                </div>
                <div class="col-lg-4 text-lg-end">
                    <button class="btn btn-light btn-lg px-4">
                        <span class="text-primary fw-bold">立即咨询</span>
                    </button>
                </div>
            </div>
        </div>
    </section>
    
    <!-- 页脚 -->
    <footer class="bg-dark text-white py-4">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h5>企业品牌</h5>
                    <p class="text-muted">专业的技术解决方案提供商</p>
                </div>
                <div class="col-md-6 text-md-end">
                    <p class="text-muted mb-0">&copy; 2023 企业品牌. 保留所有权利.</p>
                </div>
            </div>
        </div>
    </footer>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

2. 动态主题切换器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态主题切换器</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        /* 主题定义 */
        .theme-blue {
            --bs-primary: #0d6efd;
            --bs-primary-rgb: 13, 110, 253;
            --bs-secondary: #6c757d;
            --bs-secondary-rgb: 108, 117, 125;
        }
        
        .theme-green {
            --bs-primary: #198754;
            --bs-primary-rgb: 25, 135, 84;
            --bs-secondary: #20c997;
            --bs-secondary-rgb: 32, 201, 151;
        }
        
        .theme-purple {
            --bs-primary: #6f42c1;
            --bs-primary-rgb: 111, 66, 193;
            --bs-secondary: #e83e8c;
            --bs-secondary-rgb: 232, 62, 140;
        }
        
        .theme-orange {
            --bs-primary: #fd7e14;
            --bs-primary-rgb: 253, 126, 20;
            --bs-secondary: #ffc107;
            --bs-secondary-rgb: 255, 193, 7;
        }
        
        .theme-red {
            --bs-primary: #dc3545;
            --bs-primary-rgb: 220, 53, 69;
            --bs-secondary: #e83e8c;
            --bs-secondary-rgb: 232, 62, 140;
        }
        
        /* 主题切换器样式 */
        .theme-switcher {
            position: fixed;
            top: 50%;
            right: 20px;
            transform: translateY(-50%);
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            padding: 1rem;
            z-index: 1000;
        }
        
        .theme-color {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 3px solid transparent;
            cursor: pointer;
            transition: all 0.3s ease;
            margin: 0.25rem;
        }
        
        .theme-color:hover {
            transform: scale(1.1);
        }
        
        .theme-color.active {
            border-color: #333;
            transform: scale(1.2);
        }
        
        .theme-blue .theme-color { background: #0d6efd; }
        .theme-green .theme-color { background: #198754; }
        .theme-purple .theme-color { background: #6f42c1; }
        .theme-orange .theme-color { background: #fd7e14; }
        .theme-red .theme-color { background: #dc3545; }
        
        /* 过渡动画 */
        * {
            transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
        }
    </style>
</head>
<body class="theme-blue">
    <!-- 主题切换器 -->
    <div class="theme-switcher">
        <h6 class="text-center mb-3">选择主题</h6>
        <div class="d-flex flex-column align-items-center">
            <div class="theme-color" data-theme="blue" style="background: #0d6efd;"></div>
            <div class="theme-color" data-theme="green" style="background: #198754;"></div>
            <div class="theme-color" data-theme="purple" style="background: #6f42c1;"></div>
            <div class="theme-color" data-theme="orange" style="background: #fd7e14;"></div>
            <div class="theme-color" data-theme="red" style="background: #dc3545;"></div>
        </div>
    </div>
    
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="#">主题演示</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">产品</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">服务</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    
    <!-- 主要内容 -->
    <div class="container my-5">
        <div class="row">
            <div class="col-12 text-center mb-5">
                <h1 class="display-4 text-primary">动态主题切换演示</h1>
                <p class="lead text-muted">点击右侧的颜色按钮来切换不同的主题</p>
            </div>
        </div>
        
        <!-- 按钮示例 -->
        <div class="row mb-5">
            <div class="col-12">
                <h3 class="text-primary mb-3">按钮示例</h3>
                <div class="d-flex flex-wrap gap-2">
                    <button class="btn btn-primary">Primary</button>
                    <button class="btn btn-secondary">Secondary</button>
                    <button class="btn btn-success">Success</button>
                    <button class="btn btn-danger">Danger</button>
                    <button class="btn btn-warning">Warning</button>
                    <button class="btn btn-info">Info</button>
                    <button class="btn btn-outline-primary">Outline Primary</button>
                    <button class="btn btn-outline-secondary">Outline Secondary</button>
                </div>
            </div>
        </div>
        
        <!-- 卡片示例 -->
        <div class="row mb-5">
            <div class="col-12">
                <h3 class="text-primary mb-3">卡片示例</h3>
            </div>
            <div class="col-md-4 mb-3">
                <div class="card">
                    <div class="card-header bg-primary text-white">
                        <h5 class="card-title mb-0">主要卡片</h5>
                    </div>
                    <div class="card-body">
                        <p class="card-text">这是一个主要颜色的卡片示例。</p>
                        <a href="#" class="btn btn-primary">了解更多</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-3">
                <div class="card">
                    <div class="card-header bg-secondary text-white">
                        <h5 class="card-title mb-0">次要卡片</h5>
                    </div>
                    <div class="card-body">
                        <p class="card-text">这是一个次要颜色的卡片示例。</p>
                        <a href="#" class="btn btn-secondary">了解更多</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-3">
                <div class="card">
                    <div class="card-header bg-success text-white">
                        <h5 class="card-title mb-0">成功卡片</h5>
                    </div>
                    <div class="card-body">
                        <p class="card-text">这是一个成功颜色的卡片示例。</p>
                        <a href="#" class="btn btn-success">了解更多</a>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 警告框示例 -->
        <div class="row mb-5">
            <div class="col-12">
                <h3 class="text-primary mb-3">警告框示例</h3>
                <div class="alert alert-primary" role="alert">
                    <i class="bi bi-info-circle"></i> 这是一个主要信息警告框。
                </div>
                <div class="alert alert-secondary" role="alert">
                    <i class="bi bi-info-circle"></i> 这是一个次要信息警告框。
                </div>
                <div class="alert alert-success" role="alert">
                    <i class="bi bi-check-circle"></i> 这是一个成功信息警告框。
                </div>
                <div class="alert alert-danger" role="alert">
                    <i class="bi bi-exclamation-triangle"></i> 这是一个危险信息警告框。
                </div>
            </div>
        </div>
        
        <!-- 徽章示例 -->
        <div class="row mb-5">
            <div class="col-12">
                <h3 class="text-primary mb-3">徽章示例</h3>
                <div class="d-flex flex-wrap gap-2">
                    <span class="badge bg-primary">Primary</span>
                    <span class="badge bg-secondary">Secondary</span>
                    <span class="badge bg-success">Success</span>
                    <span class="badge bg-danger">Danger</span>
                    <span class="badge bg-warning text-dark">Warning</span>
                    <span class="badge bg-info text-dark">Info</span>
                    <span class="badge bg-light text-dark">Light</span>
                    <span class="badge bg-dark">Dark</span>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // 主题切换功能
        document.addEventListener('DOMContentLoaded', function() {
            const themeColors = document.querySelectorAll('.theme-color');
            const body = document.body;
            
            // 设置默认活动主题
            document.querySelector('[data-theme="blue"]').classList.add('active');
            
            themeColors.forEach(color => {
                color.addEventListener('click', function() {
                    const theme = this.getAttribute('data-theme');
                    
                    // 移除所有主题类
                    body.className = body.className.replace(/theme-\w+/g, '');
                    
                    // 添加新主题类
                    body.classList.add(`theme-${theme}`);
                    
                    // 更新活动状态
                    themeColors.forEach(c => c.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 保存主题设置
                    localStorage.setItem('selectedTheme', theme);
                });
            });
            
            // 恢复保存的主题
            const savedTheme = localStorage.getItem('selectedTheme');
            if (savedTheme) {
                const themeElement = document.querySelector(`[data-theme="${savedTheme}"]`);
                if (themeElement) {
                    themeElement.click();
                }
            }
        });
    </script>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

颜色可访问性

1. 颜色对比度

确保文本和背景之间有足够的对比度，以满足 WCAG 可访问性标准：

<!-- 良好的颜色对比度示例 -->
<div class="container my-4">
    <div class="row g-3">
        <div class="col-12">
            <h4>颜色对比度示例</h4>
        </div>
        
        <!-- 良好的对比度 -->
        <div class="col-md-6">
            <h5 class="text-success">✓ 良好的对比度</h5>
            <div class="p-3 bg-primary text-white rounded mb-2">
                白色文本在深蓝色背景上 (对比度: 8.6:1)
            </div>
            <div class="p-3 bg-dark text-white rounded mb-2">
                白色文本在深色背景上 (对比度: 15.3:1)
            </div>
            <div class="p-3 bg-light text-dark rounded border mb-2">
                深色文本在浅色背景上 (对比度: 12.6:1)
            </div>
        </div>
        
        <!-- 较差的对比度 -->
        <div class="col-md-6">
            <h5 class="text-danger">✗ 较差的对比度</h5>
            <div class="p-3 text-warning rounded border mb-2" style="background-color: #fff3cd;">
                黄色文本在浅黄色背景上 (对比度: 1.8:1)
            </div>
            <div class="p-3 text-info rounded border mb-2" style="background-color: #d1ecf1;">
                浅蓝色文本在浅蓝色背景上 (对比度: 2.1:1)
            </div>
            <div class="p-3 text-muted rounded border mb-2" style="background-color: #f8f9fa;">
                灰色文本在浅灰色背景上 (对比度: 2.9:1)
            </div>
        </div>
    </div>
</div>

2. 色盲友好设计

<!-- 色盲友好设计示例 -->
<div class="container my-4">
    <div class="row">
        <div class="col-12">
            <h4>色盲友好设计</h4>
            <p class="text-muted">除了颜色之外，还使用图标、形状和文字来传达信息</p>
        </div>
    </div>
    
    <!-- 状态指示器 -->
    <div class="row g-3 mb-4">
        <div class="col-md-4">
            <div class="alert alert-success d-flex align-items-center" role="alert">
                <i class="bi bi-check-circle-fill me-2"></i>
                <div>
                    <strong>成功</strong><br>
                    操作已完成
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="alert alert-warning d-flex align-items-center" role="alert">
                <i class="bi bi-exclamation-triangle-fill me-2"></i>
                <div>
                    <strong>警告</strong><br>
                    请注意此信息
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="alert alert-danger d-flex align-items-center" role="alert">
                <i class="bi bi-x-circle-fill me-2"></i>
                <div>
                    <strong>错误</strong><br>
                    操作失败
                </div>
            </div>
        </div>
    </div>
    
    <!-- 进度指示器 -->
    <div class="row mb-4">
        <div class="col-12">
            <h5>进度指示器</h5>
            <div class="progress mb-2" style="height: 25px;">
                <div class="progress-bar bg-success" role="progressbar" style="width: 25%">
                    <span class="fw-bold">25% 完成</span>
                </div>
            </div>
            <div class="progress mb-2" style="height: 25px;">
                <div class="progress-bar bg-warning" role="progressbar" style="width: 50%">
                    <span class="fw-bold text-dark">50% 完成</span>
                </div>
            </div>
            <div class="progress mb-2" style="height: 25px;">
                <div class="progress-bar bg-danger" role="progressbar" style="width: 75%">
                    <span class="fw-bold">75% 完成</span>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 表单验证 -->
    <div class="row">
        <div class="col-md-6">
            <h5>表单验证状态</h5>
            <div class="mb-3">
                <label for="validInput" class="form-label">
                    <i class="bi bi-check-circle text-success"></i>
                    有效输入
                </label>
                <input type="text" class="form-control is-valid" id="validInput" value="正确的输入">
                <div class="valid-feedback">
                    <i class="bi bi-check"></i> 输入格式正确！
                </div>
            </div>
            
            <div class="mb-3">
                <label for="invalidInput" class="form-label">
                    <i class="bi bi-x-circle text-danger"></i>
                    无效输入
                </label>
                <input type="text" class="form-control is-invalid" id="invalidInput" value="错误的输入">
                <div class="invalid-feedback">
                    <i class="bi bi-x"></i> 输入格式不正确！
                </div>
            </div>
        </div>
    </div>
</div>

性能优化

1. CSS 变量优化

/* 优化的 CSS 变量使用 */
:root {
    /* 只定义必要的颜色变量 */
    --primary-h: 210;
    --primary-s: 100%;
    --primary-l: 50%;
    
    /* 使用 HSL 生成颜色变体 */
    --bs-primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
    --bs-primary-dark: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 10%));
    --bs-primary-light: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 10%));
    
    /* RGB 值用于透明度 */
    --bs-primary-rgb: 0, 123, 255;
}

/* 减少重复的颜色定义 */
.btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.btn-primary:hover {
    background-color: var(--bs-primary-dark);
    border-color: var(--bs-primary-dark);
}

2. 按需加载颜色

// 按需导入 Bootstrap 颜色模块
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

// 只导入需要的颜色工具
@import "~bootstrap/scss/utilities/api";

// 自定义工具类生成
$utilities: (
  "color": (
    property: color,
    class: text,
    values: (
      "primary": $primary,
      "secondary": $secondary,
      "success": $success,
      "danger": $danger,
      "warning": $warning,
      "info": $info,
      "dark": $dark,
      "body": $body-color,
      "muted": $text-muted,
      "white": $white,
      "black-50": rgba($black, .5),
      "white-50": rgba($white, .5)
    )
  ),
  "background-color": (
    property: background-color,
    class: bg,
    values: (
      "primary": $primary,
      "secondary": $secondary,
      "success": $success,
      "danger": $danger,
      "warning": $warning,
      "info": $info,
      "light": $light,
      "dark": $dark,
      "body": $body-bg,
      "white": $white,
      "transparent": transparent
    )
  )
);

本章总结

本章详细介绍了 Bootstrap 5 的颜色系统和主题定制功能：

主要内容

1. 颜色系统基础

   • 主题颜色的含义和使用场景
   • 灰度颜色系统
   • 颜色的语义化应用

2. 工具类应用

   • 背景颜色工具类及透明度控制
   • 文本颜色工具类及透明度控制
   • 边框颜色工具类
   • 渐变背景效果

3. CSS 变量系统

   • Bootstrap 5 的 CSS 变量结构
   • 自定义颜色主题
   • 动态主题切换

4. 深色模式支持

   • Bootstrap 5.3+ 原生深色模式
   • 自定义深色模式样式
   • 主题切换实现

5. Sass 变量定制

   • 自定义 Sass 变量
   • 编译自定义主题
   • 组件样式定制

6. 可访问性考虑

   • 颜色对比度标准
   • 色盲友好设计
   • 多重信息传达方式

7. 性能优化

   • CSS 变量优化策略
   • 按需加载颜色模块

最佳实践

1. 语义化使用颜色：根据内容含义选择合适的颜色
2. 保持一致性：在整个项目中保持颜色使用的一致性
3. 考虑可访问性：确保足够的颜色对比度
4. 响应式颜色：在不同设备上测试颜色效果
5. 性能优化：合理使用 CSS 变量和按需加载

练习题

基础练习

1. 创建一个包含所有 Bootstrap 主题颜色的调色板页面
2. 实现一个简单的深色/浅色模式切换功能
3. 使用背景颜色透明度创建一个层叠效果的卡片布局

进阶练习

1. 设计并实现一个企业品牌主题，包含自定义的主色调和配色方案
2. 创建一个动态主题切换器，支持至少 5 种不同的颜色主题
3. 实现一个符合 WCAG 可访问性标准的颜色系统
4. 使用 Sass 变量创建一个可配置的多品牌主题系统

通过本章的学习，您应该能够熟练使用 Bootstrap 的颜色系统，并能够根据项目需求定制合适的主题颜色方案。