关于 dark-mode-design
dark-mode-design 是面向界面设计工作的暗色模式设计技能，帮助设计舒适、易读且无障碍的界面。它强调按暗色背景调整表面层级、颜色和组件，而非简单反转颜色。
主要功能
- 01降低整体亮度以减轻眼部负担
- 02以较浅色调构建表面层级
- 03针对暗色背景调整颜色与对比度
- 04适配图像、插画和标志
- 05检查无障碍与模式切换
适用场景
- 01为产品设计暗色模式界面
- 02调整文本和状态颜色以提升可读性
- 03为暗色模式适配图像与标志
- 04检查组件及主题切换效果
安装
复制下面的命令，在终端中运行。
$
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