The template comes with several color presets that you can modify:

• Magenta (default) 
• Blue
• Orange
• Pastel

These preset color modes determine the color values of various addons, such as text, buttons, and section backgrounds. You can modify the color values and add additional styles at any time.

Note: By default, the Color Switcher is activated in this template, so your site's visitors can switch between these color modes while browsing. If you wish to disable color modes altogether, navigate to SP Page Builder > Settings > Options > Advanced and disable the “Show Color Switcher” setting.

To customize the existing color presets:

1. Navigate to SP Page Builder > Settings > Color Library.

2. Locate the Color Variable and Mode you want to change. 

3. For example, if you want to change the default button and button hover colors, locate the variables titled “button-primary” and “button-primary-hover” respectively, and their color values in “Default” mode.

4. There are two ways you can change the color values:

• Click on the hex code of the color and type or paste the hex code of your desired color.
• Click on the color picker icon to the left of the hex code and drag your cursor inside the picker area to pick your desired color. Alternatively, you can also manually input the color hex code here as well, and it will automatically pick that color.

5. Click Save Changes to see your customized colors reflected on your site.

Besides the preset styles that come packaged with the template, you can also create new color variables and modes. 

To learn more about setting and customizing color variables and modes in SP Page Builder, please refer to our official Color Library documentation.