SuperAPI AI 工具集

dark-mode-design-expert

设计与创作

查看项目

更新于 10-15 20:30

技能介绍

用途:这是一个暗色模式 UI 设计技能,用于构建暗色主题、主题切换、氛围化界面(天气/天空/海洋渐变)、OLED 优化、暗色下的层级与表面分层、prefers-color-scheme 与 color-scheme CSS、暗色对比度与无障碍等场景。不适用于通用配色、字体选择、组件库架构或具体颜色的对比度审计。

主要能力:提供暗色模式科学依据(OLED 省电、低光舒适度、散光用户光晕效应等);WCAG 2.1 对比度要求(正文 4.5:1、大文本 3:1、UI 组件 3:1),并指出纯白配纯黑的高对比反而更易疲劳,建议主文本目标 12:1 至 16:1。给出三层令牌架构:原始色值、语义令牌、组件令牌。强调暗色下阴影失效,改用更亮的表面色实现层级(Material Design 3 色调层级),并提供 color-mix 计算叠加色的写法。还包含 prefers-color-scheme 与 light-dark() 的 CSS 模式、JavaScript 主题管理器与持久化、防止主题闪烁(FOWT)的头部内联脚本,以及天气/天空/海洋氛围 UI 的完整令牌示例(黎明、白天、黄金时刻、暮色、夜晚等时段主题)。

使用方式:资料未提供安装命令或调用步骤,仅给出 CSS 与 JavaScript 代码模式,需自行按项目集成。

限制:资料未说明收费、价格、平台支持范围或效果保证;具体实现细节以资料中的代码为准。