Material Design 之 Color System | 點燈坊

Material Design 有預定一組 顏色變數，只要提供後就可根據系統設定自動切換 Light Mode 與 Dark Mode。

Version

Material Design 3

Color

Roles

• Surface：A role used for backgrounds and large, low-emphasis areas of the screen
• Primary, Secondary, Tertiary：Accent color roles used to emphasize or de-emphasize foreground elements
• Container：Roles used as a fill color for foreground elements like buttons. They should not be used for text or icons
• On：Roles starting with this term indicate a color for text or icons on top of its paired parent color. For example, on Primary is used for text and icons against the primary fill color
• Variant：Roles ending with this term offer a lower emphasis alternative to its non-variant pair. For example, outline variant is a less emphasized version of the outline color

Primary

Use primary roles for the most prominent components across the UI, such as the FAB (FloatingActionButton), high-emphasis buttons, and active states

*　primary：required High-emphasis fills, texts, and icons against surface
*　onPrimary：required Text and icons against primary
*　primaryContainer：Standout fill color against surface, for key components like FAB
*　onPrimaryContainer： Text and icons against primary container
*　primaryFixed
*　primaryFixedDim
*　onPrimaryFixed
*　onPrimaryFixedVariant

1. onPrimary
2. primary

3. onPrimaryContainer
4. primaryContainer

Secondary

Use secondary roles for less prominent components in the UI such as filter chips.

*　secondary：required Less prominent fills, text, and icons against surface
*　onSecondary：required Text and icons against secondary
*　secondaryContainer：Less prominent fill color against surface, for recessive components like tonal buttons
*　onSecondaryContainer：Text and icons against secondary container
*　secondaryFixed
*　secondaryFixedDim
*　onSecondaryFixed
*　onSecondaryFixedVariant

1. primary
2. onPrimary
3. secondary
4. onSecondary

1. Icon：onSecondContainer
2. Button：secondaryContainer

Tertiary

Use tertiary roles for contrasting accents that balance primary and secondary colors or bring heightened attention to an element such as an input field

*　tertiary：required Complementary fills, text, and icons against surface
*　onTertiary：Text and icons against tertiary
*　tertiaryContainer：Complementary container color against surface, for components like input fields
*　onTertiaryContainer：Text and icons against tertiary container
*　tertiaryFixed
*　tertiaryFixedDim
*　onTertiaryFixed
*　onTertiaryFixedVariant

1. onTertiaryContainer
2. tertiaryContainer

Error

Use error roles to communicate error states, such as an incorrect password entered into a text field.

• error：required
• onError：required
• errorContainer：A color used for error elements needing less emphasis than error
• onErrorContainer

Surface

Use surface roles for more neutral backgrounds, and container colors for components like cards, sheets, and dialogs.

• surface：required Default color for backgrounds
• onSurface：required Text and icons against any surface color
• surfaceDim：
• surfaceBright：A color that’s always the lightest in the dark or light theme
• surfaceContainerLowest：A surface container color with the lightest tone and the least emphasis relative to the surface
• surfaceContainerLow：A surface container color with a lighter tone that creates less emphasis than surfaceContainer but more emphasis than surfaceContainerLowest
• surfaceContainer：A recommended color role for a distinct area within the surface
• surfaceContainerHigh：A surface container color with a darker tone. It is used to create more emphasis than surfaceContainer but less emphasis than surfaceContainerHighest
• surfaceContainerHighest：A surface container color with the darkest tone. It is used to create the most emphasis against the surface
• onSurfaceVariant：Lower-emphasis color for text and icons against any surface color
• surfaceTint

• Surface Role Demo

1. surface：background color
2. surfaceContainer：navigation area

1. surfaceContainerLow
2. surfaceContainer
3. surfaceContainerHigh
4. surfaceContainerHighest

Outline

There are two outline colors to be used against surface:

• outline：Important boundaries, such as a text field outline
• outlineVariant： Decorative elements, such as dividers
• shadow
• scrim
• inverseSurface
• onInverseSurface
• inversePrimary

1. outline
2. outlineVariant

Add-on Colors

Most products won't need to use these add-on color roles. However, some products require the greater flexibility and control that add-on roles provide. If you aren’t sure whether your product should use the add-on roles, it probably shouldn’t and you can ignore them.

• -Fixed roles are appropriate to use in places where Container roles are normally used, but they stay the same color between light and dark themes
• -Dim roles provide a stronger, more emphasized color with the same fixed behavior
• -FixedVariant：also have the same color between light and dark themes, but compared with on -Fixed roles, they provide a lower-emphasis option for text and icons

1. primaryFixed

Light mode 與 dark mode 完全不變

2. primaryContainer

Light mode 與 dark mode 不太一樣

1. primaryFixed
2. primaryFixedDim

Reference

Philipp Lackner：Introduction to Matirial 3 (Color Theming、Typography、Shapes)
Material Design, Color System
Material Design, Color Roles
Material Theme Builder