它们是2个不同的彩色甄选制度。 在材料设计中,使用了2个色谱法,在100至900之间。 可在上检查实质性色体。 M3在其新的彩色系统HCT中使用了0-100之间的沙子。
TL;DR
当您从Material Design2中选择Button等可组合项时,会使用M2中的颜色。当您从Material Design3中选择可组合项时,会使用M3中的标记。
Material Design2
将此翻译成中文:
无法翻译,图片是一个二维码无法确定含义。
当您选择主要的500和700时,将使用选择辅助的200和700个变体。
请将此翻译成中文:
无法翻译此内容,因为它只是一个图片。
当你调用androidx.compose.material.MaterialTheme.colors.x
时
将此翻译成中文:
无可访问的图像,请提供图像说明文字。
你们正在获得这些颜色。
Material Design3
关于材料设计3,他们发明了一个新的彩色系统(RGB, HSV, HSL),称为HCT(hue-colorfulness-tone)。 如果您有兴趣了解详情,请查阅blog 。 现在,选择0至100英磅而不是200和900色的颜色。
将此翻译成中文:
有一个谷歌的实用库可以从您选择的颜色创建这些色调。但最后一次我检查时有一个错误创建颜色。
我还建造了一个M2和M3 彩色选择图书馆,该图书馆为M3的创建而依靠gogle s Library。
使用谷歌主题构建器创建Compose的M3颜色
当您在材料建造器或任何工具中选择主要,次要和第三色调,或通过创建M3项目变体(例如40-20)使用默认颜色时,主要和次要颜色角色都将被创建。您可能会选择红色,但其色调(40)将用于主要颜色。
#FF00000 -> #c001000
将此翻译成中文:
无法翻译,因为这是一个图像,而不是一个可翻译的文本。
Color Roles
将此翻译成中文:
请见图像。
The primary key color is used to derive roles for key components
across the UI, such as the FAB, prominent buttons, active states, as
well as the tint of elevated surfaces.
The secondary key color is used for less prominent components in the
UI such as filter chips, while expanding the opportunity for color
expression.
The tertiary key color is used to derive the roles of contrasting
accents that can be used to balance primary and secondary colors or
bring heightened attention to an element. The tertiary color role is
left for teams to use at their discretion and is intended to support
broader color expression in products.
当您需要使用主色,次要色和三次色时,可以查看官方m3页面。
将此翻译为中文:
Primary
主要角色用于UI中的关键组件,例如FAB,突出按钮,活动状态以及提升表面的色调。
将此翻译为中文:
Secondary
次要角色用于 UI 中不太突出的组件,例如筛选芯片,同时扩大了颜色表达的机会。
将此翻译成中文:
Tertiary
第三角色用于对比强调色彩,可以用于平衡主要和次要颜色或提高对元素的关注度,例如输入字段。
第三色的作用留由制造商自行决定,旨在支持产品中更广泛的色彩表达。
将此翻译成中文:
无法翻译,图像无法描述。
这些代码是这样的吗?如上面所述,可组合选择相应的颜色令牌,按钮为主要颜色以配合您的主题设定颜色。
internal object FilledButtonTokens {
val ContainerColor = ColorSchemeKeyTokens.Primary
val ContainerElevation = ElevationTokens.Level0
val ContainerHeight = 40.0.dp
val ContainerShape = ShapeKeyTokens.CornerFull
val DisabledContainerColor = ColorSchemeKeyTokens.OnSurface
val DisabledContainerElevation = ElevationTokens.Level0
const val DisabledContainerOpacity = 0.12f
val DisabledLabelTextColor = ColorSchemeKeyTokens.OnSurface
const val DisabledLabelTextOpacity = 0.38f
val FocusContainerElevation = ElevationTokens.Level0
val FocusLabelTextColor = ColorSchemeKeyTokens.OnPrimary
val HoverContainerElevation = ElevationTokens.Level1
val HoverLabelTextColor = ColorSchemeKeyTokens.OnPrimary
val LabelTextColor = ColorSchemeKeyTokens.OnPrimary
val LabelTextFont = TypographyKeyTokens.LabelLarge
val PressedContainerElevation = ElevationTokens.Level0
val PressedLabelTextColor = ColorSchemeKeyTokens.OnPrimary
val DisabledIconColor = ColorSchemeKeyTokens.OnSurface
const val DisabledIconOpacity = 0.38f
val FocusIconColor = ColorSchemeKeyTokens.OnPrimary
val HoverIconColor = ColorSchemeKeyTokens.OnPrimary
val IconColor = ColorSchemeKeyTokens.OnPrimary
val IconSize = 18.0.dp
val PressedIconColor = ColorSchemeKeyTokens.OnPrimary
}