Let’s add a default color palette that will define the main and accent colors for the theme. When you add a palette, users can change the default colors that you define to anything they want to use, giving your theme ultimate color flexibility.
You define the default colors for the palette in the manifest, and then use variables in the LESS files to denote where the colors should be used.
Let’s use the following as the primary and accent colors:
- Primary: #35235D (purple)
- Accent: #DB2464 (dark pink)
With the Base theme applied to your site, click the Theme tab.
At the bottom left, click Edit HTML/CSS to open the Code Editor.
In the left panel under the
manifest.jsonto open it.
The manifest opens in the top half of the editor. You can see a preview of the site below the code.
In the manifest, after the
variationselement, add support for a color palette by entering the following:
- Define the colors by entering the following:
The palette displays in the editor. Click on the first circle to apply that palette.
What Just Happened?
You created a palette with a defined primary and accent color that allows the user to define their own palette colors. Next, you’ll create light and dark variations of the theme.