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)​
  1. With the Base theme applied to your site, click the Theme tab.

  2. At the bottom left, click Edit HTML/CSS to open the Code Editor.

  3. 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. ​

  4. In the manifest, after the variations element, add support for a color palette by entering the following:


"color-support": {
    "primary": true,
    "accent": true
    },
Add color support
  1. Define the colors by entering the following:
"color-presets": [
    {
        "primary": "#35235D",
        "accent": "#DB2464"
    }
]
Add presets
  1. ​Click Save.

    The palette displays in the editor. Click on the first circle to apply that palette.

Color palette with two colors

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.