Theme Manager is where you shape the visual identity of a client's storefront. Its editors bring together colours, typography, shadows, spacing and corner rounding.
The six areas
The navigation menu lists Palette, Typography, Box shadow, Spacing, Border radius and Templates. The theme editors separate colour, text and shape settings so you can focus on one aspect of appearance at a time.
Area | What it controls |
Palette | Sets the storefront's colour system. The editor is organised into the groups Background, Text, AppBar, Footer, Primary, Secondary, Warning, Info, Success and Error. |
Typography | Sets the type scale. Type slots are grouped by role (Display, Headline, Title, Label and Body) and by size (Large, Medium and Small). The editor also has a Font Family selector, and each type slot has Font Size, Font Weight, Line Height and Letter Spacing controls. Together, these slots give fine-grained control over the text hierarchy. |
Box shadow | Sets the shadow depth levels used across storefront surfaces. The slots are shadows.0, shadows.1, shadows.2, shadows.3, shadows.4 and shadows.6. The shadow controls include Horizontal Length, Vertical Length, Blur Radius, Spread Radius and Shadow. The previews place shadow levels in the context of cards, cart summaries and other storefront components. |
Spacing | The editor has a single slider for the Spacing value. |
Border radius | Sets the corner rounding used in the theme. The editor has a slider for the radius and a Copy to clipboard button. |
Templates | Offers ready-made presets. A preset is applied with the Apply button. |
How editing works
The Palette, Typography and Box shadow editors include sample storefront components, such as product cards and buttons, next to their controls.
When an editor opens, Save is unavailable. Reset appears on the Palette, Typography and Border radius editors. Sync appears on all six areas.
Related