核心内容摘要
日本JIZZJIZZJIZZ
HoRain云小助手个人主页 个人专栏: 《Linux 系列教程》《c语言教程》⛺️生活的理想就是为了理想的生活!⛳️ 推荐前些天发现了一个超棒的服务器购买网站性价比超高大内存超划算忍不住分享一下给大家。
点击跳转到网站。
专栏介绍专栏名称专栏介绍《C语言》本专栏主要撰写C干货内容和编程技巧让大家从底层了解C把更多的知识由抽象到简单通俗易懂。
《网络协议》本专栏主要是注重从底层来给大家一步步剖析网络协议的奥秘一起解密网络协议在运行中协议的基本运行机制《docker容器精解篇》全面深入解析 docker 容器从基础到进阶涵盖原理、操作、
实践案例助您精通 docker。
《linux系列》本专栏主要撰写Linux干货内容从基础到进阶知识由抽象到简单通俗易懂帮你从新手小白到扫地僧。
《python 系列》本专栏着重撰写Python相关的干货内容与编程技巧助力大家从底层去认识Python将更多复杂的知识由抽象转化为简单易懂的内容。
《试题库》本专栏主要是发布一些考试和练习题库涵盖软考、HCIE、HRCE、CCNA等目录⛳️ 推荐专栏介绍 两种核心模式️ 配置与基础使用 实现手动切换Class 模式 实用技巧与最佳实践Tailwind CSS 为实现深色模式提供了一套非常优雅的解决方案让你可以轻松地为网站打造明暗两种主题。
下面我将为你梳理其核心概念、配置方法和实用技巧。
两种核心模式Tailwind CSS 提供了两种启用深色模式的策略你可以根据项目需求选择其一 media模式跟随系统在此模式下Tailwind 将直接使用 CSS 媒体查询media (prefers-color-scheme: dark)。
你的网站主题会自动与用户操作系统的深色模式设置同步 。
配置非常简单只需在tailwind.config.js文件中进行设置// tailwind.config.js module.exports { darkMode: media, // ... 其他配置 }class模式手动控制这是更灵活、更推荐的方式。
此模式下深色样式的生效取决于在 HTML 的根元素通常是html标签上是否存在dark类 。
这允许你为用户提供手动切换主题的开关。
// tailwind.config.js module.exports { darkMode: class, // ... 其他配置 }️ 配置与基础使用启用深色模式如上所述首先在配置文件中设置darkMode选项。
请注意为了保持生成CSS文件的大小可控深色模式变体默认是关闭的所以这一步是必须的 。
使用dark:前缀配置完成后你就可以在 HTML 模板中使用dark:前缀来定义元素在深色模式下的样式了 。
div classbg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 h1 classtext-2xl font-bold优雅的主题切换/h1 p classtext-gray-600 dark:text-gray-400这段文字在深色模式下会变浅。
/p /div 实现手动切换Class 模式如果选择了class模式你需要用 JavaScript 动态控制dark类的添加和移除。
基础切换逻辑核心是通过 JS 操作 DOM切换html标签上的类。
// 最简单的切换函数 function toggleDarkMode() { document.documentElement.classList.toggle(dark); }持久化用户偏好为了提升用户体验通常会将用户的选择保存到localStorage中并在页面加载时读取设置 。
// 页面加载时根据本地存储或系统偏好设置主题 if (localStorage.theme dark || (!(theme in localStorage) window.matchMedia((prefers-color-scheme: dark)).matches)) { document.documentElement.classList.add(dark); } else { document.documentElement.classList.remove(dark); } // 当用户手动切换时 function toggleDarkMode() { const isDark document.documentElement.classList.toggle(dark); localStorage.setItem(theme, isDark ? dark : light); }响应系统主题变化你还可以监听系统主题的变化并在用户没有明确选择时自动跟随 。
window.matchMedia((prefers-color-scheme: dark)).addEventListener(change, e { if (!(theme in localStorage)) { // 仅在用户未手动设置时跟随 if (e.matches) { document.documentElement.classList.add(dark); } else { document.documentElement.classList.remove(dark); } } }); 实用技巧与最佳实践组合使用变体dark:前缀可以与响应式断点和状态变体如hover:结合使用。
关键是要注意顺序响应式断点在最前其次是dark:最后是状态变体 。
button classlg:dark:hover:bg-white ...按钮/button处理图片和图标可以为浅色和深色模式准备不同的图片或图标资源 。
!-- 使用 picture 元素 -- picture source srcsetdark-image.jpg media(prefers-color-scheme: dark) img srclight-image.jpg alt示例图片 /picture !-- 或使用 CSS 类控制显示隐藏 -- img srclogo-light.svg classdark:hidden alt浅色Logo img srclogo-dark.svg classhidden dark:block alt深色Logo避免页面闪烁如果 JS 脚本在页面渲染后执行可能会出现短暂的主题闪烁。
解决方法是将初始化主题的脚本内联在 HTML 的head标签最顶部 。
head script // 在HTML解析前立即初始化主题 if (localStorage.theme dark || (!(theme in localStorage) window.matchMedia((prefers-color-scheme: dark)).matches)) { document.documentElement.classList.add(dark); } else { document.documentElement.classList.remove(dark); } /script /head设计一致性在设计深色模式时并非简单地将黑色背景与白色文字互换。
建议使用深灰色如gray-800,gray-900作为背景浅灰色如gray-300,gray-200作为文字这样视觉上会更舒适 。
同时确保颜色对比度符合可访问性标准。
希望这份指南能帮助你顺利地在项目中实现强大的深色模式功能如果你在具体实现中遇到任何细节问题例如如何与特定框架如 React、Vue集成我很乐意提供进一步的帮助。
❤️❤️❤️本人水平有限如有纰漏欢迎各位大佬评论批评指正如果觉得这篇文对你有帮助的话也请给个点赞、收藏下吧非常感谢! Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧