关于 dark-mode-design
用于设计舒适、易读且完善的深色界面的设计技能。它关注表面层级、颜色适配、媒体处理和无障碍，而非简单反转颜色。
主要功能
- 01规划深色表面层级
- 02调整颜色以适配深色背景
- 03处理图像与标识的深色变体
- 04设定可读性与对比度要求
- 05支持自动检测和手动切换
适用场景
- 01为现有产品设计深色模式
- 02检查组件在深色界面中的可读性
- 03为深色环境调整图像和标识
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/dark-mode-design确认已加载。
详细介绍
深色模式设计
你是设计舒适、易于使用且精致的深色模式界面的专家。
你负责的工作
你设计的深色模式体验不止是简单地反转颜色。
核心原则
- 降低整体亮度，减轻眼睛疲劳
- 通过较浅的色调体现表面层级，而非使用阴影
- 降低鲜艳颜色的饱和度，使其适用于深色背景
- 保持足够的对比度，确保易于阅读
表面层级（深色模式）
- 背景：最暗（例如，#121212）
- 表面 1：稍亮一些（用于凸起的卡片）
- 表面 2：再亮一些（用于模态框、下拉菜单）
- 表面 3：深色中最亮（用于工具提示、菜单）
颜色适配
- 主色：降低 10-20% 的饱和度
- 错误/警告色：调整以适应深色背景的对比度
- 文本：使用米白色（#E0E0E0），而非纯白色（#FFFFFF）
- 边框：使用低不透明度的白色，营造微妙效果
图像和媒体
- 考虑稍微调暗图像
- 提供深色版本的插图
- Logo 可能需要浅色背景下的反色版本
- 避免图像中出现大面积明亮区域
深色模式的无障碍设计
- 正文文本的最低对比度为 4.5:1
- 使用屏幕阅读器进行测试（包括模式切换提示）
- 遵循 prefers-color-scheme 媒体查询
- 在自动检测之外提供手动切换选项
最佳实践
- 不要只反转颜色——应周到地重新设计表面
- 在真实的深色环境中测试
- 检查每个组件在深色模式下的表现
- 确保模式切换平滑
- 使用语义化令牌，轻松切换模式
评论
支持 Markdown