dark-mode

用途\n该技能是“design-it”技能的附属参考，用于指导 Web 与 App 的深色模式设计与实现，触发场景为：用户希望使用暗色表面、减少眼睛疲劳并呈现高级、精致的视觉效果。资料明确说明它不应被直接触发，属于子风格参考。\n\n核心原则\n- 表面色选择：黑色与深灰都有效；OLED 残影与显示器有关，舒适度取决于用户与光照环境。建议提供主题选择并测试对比度。\n- 用明度表达层级（Elevation）：在阴影不明显时，更亮的表面与边框可以帮助区分层次；但资料同时提醒，阴影在深色模式下并非普遍不可见。\n- 强调色测试：根据可读文本与清晰状态指示选择强调色饱和度，避免作“普遍不适”的断言。\n\n视觉基调\n资料给出“Midnight Luxury”或“Minimalist Slate（反色）”方向：背景 #121212，高级卡片 #1E1E1E、#252525，正文 #E1E1E1（而非纯白）。字体使用标准高可读无衬线体，但因浅色文字在深色背景上视觉偏粗，常比浅色模式降低一个字重。阴影用纯黑但透明度更低，主要用于区分不同深浅的灰色。\n\nWeb 实现\n提供 CSS 示例：定义 --bg-base: #121212、--bg-elevated-1: #1E1E1E、--bg-elevated-2: #242424、--text-high-emphasis: rgba(255,255,255,0.87)、--text-medium-emphasis: rgba(255,255,255,0.60)，强调色使用去饱和紫色 #BB86FC。示例包含 body、.dark-card（含低透明度边框与 hover 变亮）、.dark-btn（浅强调色上使用深色文字）。\n\nApp 实现\n给出 SwiftUI、Flutter、React Native、Jetpack Compose 示例。SwiftUI 建议依赖 Color.primary、Color.secondary、systemBackground 等语义色并验证自定义组合与高对比度设置，除非自建主题否则避免硬编码十六进制背景。Flutter 示例使用 ThemeMode.dark，并将 scaffoldBackgroundColor 覆盖为 #121212、cardColor 为 #1E1E1E，onPrimary 设为黑色以保证按钮文字可读。React Native 使用 useColorScheme()，用主题字典让强调色在浅色模式为鲜艳紫 #6200EE、深色模式为去饱和紫 #BB86FC。Jetpack Compose 定义 darkColorScheme，background #121212、surface #1E1E1E、primary #BB86FC、onPrimary 黑色，并提示 Material 3 角色仍需对比度测试。\n\n注意事项\n应满足 WCAG 对比度标准；不要使用高亮、高饱和的主色。\n\n限制\n该资料是样式参考，不能替代针对具体环境的验证、无障碍测试或专家评审；对比度比例与响应式行为需另行验证。