Skip to main content
颜色只通过 MochiTheme 读取。组件实现使用语义 token,不直接写十六进制值。MochiTheme.colors 是基础界面色;MochiTheme.extraColors 是状态色。

Colors

Colors 由 lightColors() 或 darkColors() 创建。下列默认值按 Light / Dark 顺序列出。
Color
default:"#166E3F / #26BD6C"
主操作、选中状态、焦点和关键强调色。
Color
default:"#458B65 / #209A59"
轻量品牌背景和次级选中状态。
Color
default:"#FFFFFF / #180D0C"
绘制在 brand 表面上的文字和图标。
Color
default:"#B9D3C5 / #0E2A1C"
禁用主操作。
Color
default:"#166E3F / #8DDEDE"
需要比普通标题更强识别度的标题色。
Color
default:"#FFFFFF / #FFFFFF"
必须固定为白色的内容。
Color
default:"#000000 / #000000"
必须固定为黑色的内容。
Color
default:"#FFFFFF / #0A0D0D"
页面或窗口背景。
Color
default:"#F5F7F8 / #121515"
输入框、分组区域和备用背景。
Color
default:"#EEF1EF / #262827"
整块组件在按下或激活时的背景。
Color
default:"#F5F7F8 / #1A1D1D"
禁用表面的基础背景。
Color
default:"#E9EAE9 / #242527"
禁用表面的备用背景。
Color
default:"#166E3F / #26BD6C"
交互控件的边框和焦点边框。
Color
default:"#E9EAE9 / #242527"
组件内部和列表之间的细分隔线。
Color
default:"#171A18 / #DFE1E0"
主文字和高优先级图标。
Color
default:"#111827 / #FFFFFF"
辅助文字和普通图标。
Color
default:"#838182 / #9FA1A0"
占位符、禁用文字和低优先级图标。
Color
default:"#99000000 / #99000000"
对话框、抽屉和阻塞层后的遮罩。

ExtraColor

ExtraColor 描述单个状态等级的表面、文字、图标和边框颜色。Toast 等状态组件应从这里选择等级,而不是自行推导颜色。
Color
required
该等级的柔和表面色。
Color
required
该等级的标题和高优先级文字色。
Color
required
该等级的图标色。
Color
required
该等级的边框和描边色。

ExtraColors

ExtraColors 的默认值来自 lightExtraColors() 或 darkExtraColors()。每个字段都是一组 ExtraColor,并包含 container、text、icon、stroke 四种角色。
ExtraColor
中性状态。
ExtraColor
信息和强调状态。
ExtraColor
成功状态。
ExtraColor
警告状态。
ExtraColor
高关注但未失败的状态。
ExtraColor
default:"lightExtraColors().red / darkExtraColors().red"
错误和危险状态。
ExtraColor
独立于品牌色的特殊分类状态。
ExtraColor
白色表面上的中性内容。
ExtraColor
普通组件表面。
ExtraColor
白色表面上的破坏性内容。
ExtraColor
带危险语义的表面。

覆盖颜色

只覆盖需要改变的 token。lightColors() 和 darkColors() 的每个字段都有默认值,因此品牌定制不需要重建 Colors。