暗色界面用这Skill重排表面

将现有配色方案适配到深色模式并调整对比度。

dark-mode-design 是把已有界面色板适配为暗色模式的 Skill。它重新安排背景、卡片、弹层、文字与状态颜色,并检查图片和组件在暗底上的表现。

暗色不是把颜色全部取反,表面层级和重要操作仍需看得清。错误、禁用、聚焦和悬停状态都要检查,不能只截一张首页就算适配完成。

原文的减饱和比例与色值是参考,降低亮度也不保证每个人都更舒适。对比度应按文字和元素条件验证,同时尊重系统偏好,并给用户合适的手动选择。

适合已有亮色规范后的模式补全。本文未修改界面;图片暗化要保留必要信息,过渡也需照顾减少动态偏好,色板换好以后仍要在真实环境与操作路径里核阅读。

分类:设计创作

来源仓库:owl-listener/designer-skills

适合用来做什么

  • 将这个浅色调色板转换为深色模式。
  • 调整表面高度以适应深色模式设计。

安装 dark-mode-design

npx skills add https://www.iskills.cc/skills/owl-listener/designer-skills/dark-mode-design/SKILL.md

在本机终端执行安装命令。安装前请阅读原始说明,确认所需工具、账号和权限。

查看安装步骤 · 查看常见问题

查看 dark-mode-design 的用途与原始说明

浏览全部 Skill 指南