Tailwind CSS 实战，基于 Kooboo 构建 AI 对话框页面（三）：实现暗黑模式主题切换

news2025/6/4 12:56:20

基于前两篇的内容，为页面添加主题切换功能，实现网站页面的暗黑模式：

Tailwind css实战，基于Kooboo构建AI对话框页面（一）-CSDN博客

Tailwind css实战，基于Kooboo构建AI对话框页面（二）-CSDN博客

在前两篇内容的基础上，为页面新增暗黑 / 亮色双主题切换功能，完善用户体验。最终效果如下：

一、暗黑模式的需求与价值

用户体验升级：提供亮色 / 暗黑主题切换，适配不同使用场景（如夜间阅读、视觉偏好），提升产品包容性。
视觉一致性：通过 CSS 变量统一管理颜色，确保主题切换时界面元素（如聊天气泡、按钮、文本）的样式协调。
技术挑战：如何实现动态主题切换、持久化存储用户偏好。

二、暗黑模式技术实现（核心代码解析）

1. CSS 变量定义：主题解耦

在 CSS 中，通过:root伪类定义的变量是全局作用域的，它代表了文档的根元素（在 HTML 中就是<html>元素）。这里定义的变量是亮色主题（也就是默认主题）下的颜色值。

<style>
        /* 亮色主题（默认） */
        :root {
            --bg-primary: #ffffff;
            --bg-secondary: #f8f9fa;
            --bg-tertiary: #e9ecef;
            --border-color: #dee2e6;
            --text-primary: #333333;
            --text-secondary: #6c757d;
            --text-tertiary: #e5e7eb;
            --chat-bubble: #ffffff;
            --chat-bubble-ai: #f8f9fa;
        }
        
        /* 暗黑主题 */
        .dark {
            --bg-primary: #1e293b;
            --bg-secondary: #0f172a;
            --bg-tertiary: #334155;
            --border-color: #4b5563;
            --text-primary: #f3f4f6;
            --text-secondary: #9ca3af;
            --text-tertiary: #1f2937;
            --chat-bubble: #334155;
            --chat-bubble-ai: #1e293b;
        }
    </style>

作用：通过 :root 和 .dark 类定义全局颜色变量，后续样式直接引用变量（如 bg-[var(--bg-primary)]），实现主题 “一键切换”。

Tailwind 整合：利用 var() 函数与 Tailwind 的自定义值（[] 语法）结合，如background-color: var(--bg-primary);无需重复编写暗黑模式专属类。

2. 切换按钮 UI（HTML + Tailwind）

从 HTML 结构来看，这是一个用于切换暗黑模式的按钮。id="darkModeToggle"为按钮赋予了唯一标识，方便在 JavaScript 中获取和操作。

<!-- 暗黑模式切换按钮 -->
    <button id="darkModeToggle" class="fixed top-4 right-4 z-10 bg-[var(--bg-primary)] text-[var(--text-primary)] p-2 rounded-full shadow-lg hover:bg-[var(--bg-tertiary)] transition-colors">
        <i class="fa fa-moon-o dark:hidden"></i>
        <i class="fa fa-sun-o hidden dark:inline"></i>
    </button>

交互设计：
- 固定定位（fixed）确保按钮始终可见；
- dark:hidden 和 dark:inline 实现图标随主题切换（Tailwind 暗黑模式前缀 dark: 自动匹配 .dark 类）；
- hover 效果（hover:bg-[var(--bg-tertiary)]）增强交互反馈。

3. 主题切换逻辑（JavaScript）

<script>
        // 暗黑模式切换逻辑
        document.addEventListener('DOMContentLoaded', function() {
            const toggle = document.getElementById('darkModeToggle');
            const html = document.documentElement;
            
            // 检查本地存储中的偏好设置
            if (localStorage.getItem('darkMode') === 'true' || 
                (localStorage.getItem('darkMode') === null && 
                 window.matchMedia('(prefers-color-scheme: dark)').matches)) {
                html.classList.add('dark');
            }

            // 切换事件：更新类名 + 本地存储
            toggle.addEventListener('click', function() {
                html.classList.toggle('dark');
                localStorage.setItem('darkMode', html.classList.contains('dark'));
            });
        });
    </script>

这段 JavaScript 代码的作用是实现暗黑模式的切换逻辑和用户偏好的管理：

document.addEventListener('DOMContentLoaded', () => {... })：这是一个事件监听器，当页面的 DOM（文档对象模型）加载完成后，才会执行里面的代码。确保在页面元素都加载好之后再进行操作，避免获取不到元素的情况。
const toggle = document.getElementById('darkModeToggle');：通过id获取到页面上的暗黑模式切换按钮元素

核心逻辑：

持久化存储：通过 localStorage 记录用户选择，刷新页面后保持主题；
系统主题适配：首次访问时，若用户系统偏好暗黑模式（prefers-color-scheme: dark），自动启用暗黑主题；
性能优化：直接操作 document.documentElement（HTML 根元素）的 classList，确保样式切换无延迟。

三、与前两章内容的整合

容器样式与 CSS 变量深度绑定：
在 HTML 中通过 bg-[var(--bg-primary)] border-[var(--border-color)] 等写法，将容器的背景色、边框色直接关联到 CSS 变量。。例如：

<!-- 窗口容器 -->
<div class="max-w-3xl w-full 
  bg-[var(--bg-primary)]      <!-- 主背景色，亮色/暗黑模式自动切换 -->
  border border-[var(--border-color)]  <!-- 边框色 -->
  rounded-lg shadow-xl overflow-hidden">

<!-- 消息容器 -->
<div id="messageContainer" class="h-[60vh] overflow-y-auto p-4 space-y-4 bg-[var(--bg-secondary)]">

<!-- 输入区域 -->
<div class="bg-[var(--bg-primary)] p-4 border-t border-[var(--border-color)]">

优势：所有容器样式通过变量动态控制，一行 CSS 变量修改即可全局响应主题切换，无需逐个组件调整样式，极大提高了开发效率。