Step 3: Add a Color Palette
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:
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)
Tip: If at any time the colors or display in the preview seem incorrect , it may be because the manifest has invalid JSON. You can use a validator like this one to make sure your code is correct.
- 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 Assets directory, click manifest.json to 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 variations element, add support for a color palette by entering the following:
5. Define the colors by entering the following:
6. Click Save.
The palette displays in the editor. Click on the first circle to apply that palette.
The palette displays in the editor. Click on the first circle to apply that palette.
Note: Nothing will change in the preview because we need to now use the primary and accent colors in the theme.
Tip: If you don't see the palette, try refreshing your browser.
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.
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.