前景色外观
文字和图标自己显示出来的颜色,跟它们后面的底色是两回事。
- 字的颜色
- 图标什么色
- 把字改成灰的
- 前景色
- 文字颜色
- 内容色
示例
把说不清的东西,变成能说清的词。
color: #F2F4F7;
Web / iOS / Android 对照
Web原生支持
平台通用范围
color
CSS: color
iOS原生支持
平台通用范围
foregroundStyle
SwiftUI: .foregroundStyle(_:)
官方描述是「把视图的前景元素设置为某个 style」——不止颜色,也可以是渐变。
Android原生支持
平台通用范围
color
Compose: Text(color = …)
文档给的是 Text 的 color 参数;Material 主题另有 contentColor / LocalContentColor 承担同一角色。
使用规范
什么时候用
- 需要区分主次文本时
- 需要表达链接、危险操作等语义时
什么时候别用
- 对比度不足以读清时
- 只靠颜色区分状态、没有第二重线索时
容易混淆
跨端框架实现
- Flutter
TextStyle.colorText(style: TextStyle(color: …))
给 AI 的提示词
这条词条还没有经过验证的实现提示词。