首先利用CSS媒体查询检测系统偏好，再通过CSS变量定义主题颜色，并结合JavaScript实现手动切换与本地存储，确保响应式布局在不同设备与主题下均保持良好可读性与视觉效果。
支持黑暗模式的响应式界面需要兼顾视觉适配、用户体验和系统偏好。核心在于利用 CSS 媒体查询检测用户系统设置，并通过灵活布局确保在不同设备上正常显示。
使用 prefers-color-scheme 检测暗色偏好
浏览器提供 prefers-color-scheme 媒体查询，可识别用户的系统主题选择。
例如：设置默认浅色主题，再根据用户偏好切换：
:root {
--bg-color: #ffffff;
--text-color: #333333;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #121212;
--text-color: #e0e0e0;
}
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
结合 CSS 变量实现主题切换
使用 CSS 自定义属性集中管理颜色变量，便于维护和动态切换。
你可以在 JavaScript 中添加手动切换按钮，通过给 html 或 body 添加类名来覆盖默认主题：
- 定义 light 和 dark 类分别对应不同变量值
- 按钮点击时切换类名，实现即时主题变更
- 将用户选择存储在 localStorage 中，刷新后保持偏好
确保响应式布局兼容双主题
响应式设计依赖弹性布局、媒体查询和相对单位，这些与主题无关，但需注意颜色对比度在不同背景下的可读性。
- 使用 rem 或 em 单位保证文字在不同屏幕缩放下清晰
- 在暗色模式下避免纯黑背景与纯白文字，减少视觉疲劳
- 图片或图标在深色背景下可能需要调整透明度或叠加蒙版
- 测试移动设备上的字体渲染和色彩表现
基本上就这些。关键是把主题逻辑解耦，用 CSS 变量统一控制样式，配合系统检测和用户选择，再确保响应式结构稳定。不复杂但容易忽略细节。
