Open Palette in Theme Manager. Use this screen to edit the color tokens for the current storefront theme.
Color groups
The editor is headed Edit palette. Each row is a selectable token group, and selecting a group opens a color editor containing that group's individual color tokens.
Group | Purpose |
Background | This group applies colors to the overall site background and container surfaces. |
Text | This group provides colors for body copy and supporting text. |
AppBar | This group provides colors for the top navigation bar. |
Footer | This group provides colors for the footer section. |
Primary | This group provides brand colors for main action buttons and key interface elements. |
Secondary | This group provides brand colors for supporting action buttons and accents. |
Warning | This group provides colors for warning states and toaster messages. |
Info | This group provides colors for informational states and toaster messages. |
Success | This group provides colors for success states and toaster messages. |
Error | This group provides colors for error states and toaster messages. |
Color tokens
Each group holds a fixed set of named color tokens. Token values belong to the client's theme and can differ between storefronts.
Group | Tokens |
Background | This group contains Default and Paper. |
Text | This group contains Primary, Secondary, and Disabled. |
AppBar | This group contains Main, Light, Dark, and Contrast Text. |
Footer | This group contains Main, Light, Dark, and Contrast Text. |
Primary | This group contains Main, Light, Dark, and Contrast Text. |
Secondary | This group contains Main, Light, Dark, and Contrast Text. |
Warning | This group contains Main, Light, Dark, and Contrast Text. |
Info | This group contains Main, Light, Dark, and Contrast Text. |
Success | This group contains Main, Light, Dark, and Contrast Text. |
Error | This group contains Main, Light, Dark, and Contrast Text. |
Toolbar
Control | Availability or purpose |
Save | Save is disabled until you make a change. |
Sync | Use Sync after saving palette changes to push the current theme build to the storefront and make the changes visible on the live site. |
Notes
The live preview panel renders storefront components as you select and edit color groups. The preview content is sample data and is not editable on this screen.
Related