深色模式

中文使用指南 · 下方保留完整原文

主题机制

JGuang UI 使用语义 CSS 变量定义背景、文字、边框、强调色和图表色。组件通过 Tailwind 类引用这些变量，而不是在每个组件中写死颜色。

切换深色模式

项目需要使用与 Tailwind dark 变体一致的主题选择器。常见配置是在 html 元素切换 dark 类，并为 .dark 定义对应变量。需要跟随系统时，读取 prefers-color-scheme；需要记住选择时，将用户偏好保存在浏览器本地。

避免闪烁

在页面首次绘制前应用已保存的主题，同时为服务端渲染与客户端偏好差异设计一致的回退。访问浏览器存储时捕获异常，避免隐私模式使整页报错。

验证

分别检查普通、悬停、选中、禁用、错误和焦点状态，特别留意对话框、弹出层、图表与第三方预览。不能只把背景改黑而保留浅色文字或图标配置。