Tailwind CSS 暗色模式的三种实现策略
234 字
1 分钟
Tailwind CSS 暗色模式的三种实现策略
暗色模式的常见策略
Tailwind 内置了三种暗色模式策略，通过 darkMode 配置切换：
| 策略 | 配置 | 触发方式 |
|---|---|---|
| 跟随系统 | media | 根据 prefers-color-scheme |
| 手动切换 | class | 在 <html> 上添加 dark 类 |
| 选择器 | selector | 通过自定义 CSS 选择器 |
本项目使用的是 class 策略，因为它允许用户在亮/暗之间自由切换。
防止主题闪烁
如果在加载完成后再用 JS 设置主题，用户会先看到亮色再闪成暗色。解决办法是在 <head> 内联一段同步脚本：
<script is:inline> const stored = localStorage.getItem('theme'); if (stored === 'dark') document.documentElement.classList.add('dark');</script>双主题语法高亮
借助 Shiki 可以同时输出亮/暗两套配色，再由 CSS 变量切换：
html.dark .astro-code,html.dark .astro-code span { color: var(--shiki-dark) !important;}小结
合理的暗色模式不仅要「能切换」，更要「切换得不突兀」。内联脚本 + class 策略是目前最稳妥的组合。
文章分享
如果这篇文章对你有帮助，欢迎分享给更多人！
Tailwind CSS 暗色模式的三种实现策略
https://mingblog.de5.net/posts/tailwind-dark-mode/相关文章智能推荐
1
使用 Astro 快速搭建一个静态博客
前端开发从零开始，用 Astro + Content Collections 构建一个支持 Markdown 的静态个人博客，体验零运行时 JS 的极速体验。
2
5 个让 TypeScript 代码更健壮的实践
前端开发从 strict 模式到类型守卫，分享 5 个能显著提升 TypeScript 项目可维护性与安全性的实用技巧。
3
用 Typora 写博客：零基础发布全流程
写作指南一份完全面向新手的使用说明：从克隆项目到本地预览，从 Typora 写作到 git 推送自动部署，手把手带你在这个博客上发布第一篇文章。
4
Git 工作流最佳实践：从独狼到团队协作
后端运维深入讲解 Git Flow、GitHub Flow 和 Trunk-Based Development 三种主流分支策略，附完整命令示例与流程图，帮你选择最适合团队的工作流。
5
Docker 容器化实战：从 Dockerfile 到多服务编排
后端运维手把手教你编写 Dockerfile、使用 Docker Compose 编排多容器应用，附架构图与常用命令备忘，适合容器化入门与进阶。
随机文章随机推荐