← 返回文章列表
035 — 前端 · #Tailwind #CSS · 2026-08-15 · 1 MIN READ
Tailwind 暗色模式的三种实现与取舍
暗色模式是技术博客的标配，但实现方式直接影响后续的维护成本。三种主流方案我都试过，最后选择了 CSS 变量令牌。
三种方案
- 媒体查询：跟随系统，用户无法手动切换，第一个排除
- class 策略：每个元素写
dark:前缀，灵活但冗长 - CSS 变量：颜色全部定义为变量，暗色只改变量值
为什么选 CSS 变量
设计系统里颜色只有十几个令牌，用变量定义后，Tailwind 的 theme.extend 直接引用变量名。切换主题时一行 JS 改 html.dark 类，所有颜色同时反转，组件代码里一个 dark: 都不用写。
防闪烁
主题初始化脚本必须内联在 <head> 最前面，同步读取 localStorage，否则暗色用户每次刷新都会先看到一帧白屏。这是暗色模式最容易被忽略的工程细节。
Comments