使用 React 实现深色模式
内容提要
本文介绍了在应用程序界面中实现浅色和深色模式切换的方法，包括使用CSS变量定义颜色、属性选择器和自定义数据属性设置颜色，使用LocalStorage保存用户选择，使用CSS媒体查询自动切换模式。还提到了一些CSS框架和组件库可辅助实现深色模式。
延伸解读
CSS变量与属性选择器的配合
文章通过CSS变量定义两套颜色，并利用属性选择器如[data-theme="dark"]来切换。这种做法的优势在于，只需改变HTML元素上的data-theme属性，所有使用var()引用的颜色都会自动更新，无需逐个修改样式。同时，自定义数据属性data-*的命名并非强制，但遵循推荐格式有助于代码可读性。
本地存储与系统偏好的取舍
使用localStorage保存用户选择可以确保关闭浏览器后偏好不丢失，而sessionStorage则会在会话结束时清除。另一方面，通过CSS媒体查询和window.matchMedia可以跟随系统主题。实际实现时可能需要结合两者：优先读取本地存储，若无则采用系统偏好，并在系统偏好变化时动态调整。
框架与组件库的辅助作用
TailwindCSS通过dark:变体简化了深色模式样式编写，而Shadcn/ui提供了预定义的CSS变量和现成组件，支持HSL、十六进制和RGB颜色格式。这些工具减少了手动编写CSS的工作量，但自定义时仍需理解底层变量机制。文章提到Shadcn/ui默认采用黑白配色，类似Vercel风格，但可轻松定制。
Q&A
如何在应用程序中实现深色模式切换？
可以使用CSS变量定义两套颜色，通过属性选择器和自定义数据属性设置颜色，并使用JavaScript切换data-theme属性。
如何保存用户选择的深色模式？
可以使用LocalStorage保存用户的选择，这样即使关闭窗口后也能保持选择。
如何根据操作系统的主题自动切换模式？
可以使用CSS媒体查询和JavaScript的matchMedia API来检测操作系统的主题设置。
TailwindCSS如何支持深色模式？
TailwindCSS提供简单的类名来定制深色模式，例如使用bg-white和dark:bg-slate-800类。
Shadcn/ui在深色模式实现上有什么优势？
Shadcn/ui提供现成的UI组件和预定义的CSS变量，支持快速实现深色模式，且易于自定义。
使用CSS变量有什么好处？
使用CSS变量可以方便地定义和切换颜色，简化样式管理，提高代码的可维护性。
