前端Wiki/CSS 框架/深入/定制主题

暗色模式实现

暗色模式的正确姿势是 CSS 变量 + 切换机制：把颜色定义成变量（--bg、--text），界面元素只引用变量；切换主题时只需改变变量的值，所有元素自动跟随。下面的可运行示例用 prefers-color-scheme 跟随系统设置，打开系统深色模式就能看到卡片变色。

Bootstrap 5.3 内置了 data-bs-theme="dark" 属性方案：把属性放到 html 或局部容器上，内部组件整体换肤，配合一小段 JS 切换属性即可，还能做出「跟随系统 + 手动覆盖」的三态开关。

Tailwind 提供 dark: 前缀，配置 darkMode 为 'class' 后，给 html 加上 dark 类，所有 dark:bg-gray-900 生效；默认则跟随系统的 prefers-color-scheme。共同的思想都是：颜色与组件解耦，主题切换只是改变量/类名。

本节要点暗色模式核心：CSS 变量定义颜色，切换时改变量值；Bootstrap 用 data-bs-theme 属性，Tailwind 用 dark: 前缀 + class 策略。

CSS

<style>
  /* 1. 用 CSS 变量定义主题色 */
  :root {
    --bg: #ffffff; --text: #222; --card: #f1f3f5;
  }
  /* 2. 跟随系统的暗色模式：只改变量值 */
  @media (prefers-color-scheme: dark) {
    :root { --bg: #1a1a1a; --text: #eee; --card: #2b2b2b; }
  }
  /* 3. 界面只引用变量，切换主题零改动 */
  body { background: var(--bg); color: var(--text); }
  .card { background: var(--card); padding: 16px; border-radius: 8px; }
</style>
<div class="card">
  <p>切换系统的深色/浅色模式，这张卡片会自动变色。</p>
  <p>Bootstrap 5.3 的 data-bs-theme="dark"、
     Tailwind 的 dark: 前缀，原理与此一致。</p>
</div>
<!-- Tailwind 写法对照：
     <div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100"> -->

🔗 相关词条Bootstrap Tailwind CSS 变量 HTML CSS JS 元素前缀

📚 推荐阅读

Element Plus v2.2 组件库教程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读