Chord features expansive controls for the Colors used throughout the theme. Divided into common categories, colors can be specified by clicking the color picker beside the color label.
Customize color
Steps:
- From your Shopify admin, go to Online Store > Themes.
- Find the theme that you want to edit, and then click Customize.
- Click Theme settings gear icon.
- Click Colors
- To open the color picker, click the color swatch for the content type color you want to change. To set a specific hex color code, click on the text field to enter the color. To set the color to transparent, delete the hex code value from the text field.
- Click Save
Settings
| Setting | Description |
|---|---|
| Base | |
| Text | Body text color |
| Background | The background color of the body. |
| Border | Border color apply to certain elements containing Form input, widget, drawer, modal, etc |
| Color schemes | |
| Background | Primary roles are used for key components across the UI, such as the button, prominent buttons, active states, as well as the tint of elevated surfaces. |
| Text | Color on primary color. |
| Background | Secondary roles are used for less prominent components in the UI, such as secondary button. |
| Text | Colors on secondary color. |
| Background | Tertiary roles are used for contrasting accents that can be used to balance primary and secondary colors or bring heightened attention to an element, such as sale price, sale label, favorited icon |
| Text | Colors on tertiary color. |