> For the complete documentation index, see [llms.txt](https://themihub.gitbook.io/isotech-shopify-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://themihub.gitbook.io/isotech-shopify-theme/theme-settings/colors.md).

# Colors

How to alter the color scheme to better fit the style and feel of the website

{% hint style="success" %}
**Take the following steps:**

1. In the theme editor (**Customize**), click **Theme settings**
2. Locate **Color settings**
3. Make the necessary adjustments.
4. **Save**
   {% endhint %}

<figure><img src="https://content.gitbook.com/content/7Hg8cYZOt66iWZS4tTz7/blobs/ydFBslIQZeN5VFr3rVAy/colors.png" alt=""><figcaption></figcaption></figure>

## Add a color scheme group

<figure><img src="https://content.gitbook.com/content/7Hg8cYZOt66iWZS4tTz7/blobs/BfNgv6GMQYDxprPl8MeZ/add_color_scheme.png" alt=""><figcaption></figcaption></figure>

| Settings                     | Description                                                              |
| ---------------------------- | ------------------------------------------------------------------------ |
| Background                   | This is a field to add background color                                  |
| Background gradient          | Background gradient replaces background where possible.                  |
| Text                         | This is a field to add text color                                        |
| **Primary/Solid button**     | **Solid background button**                                              |
| Button background            | This is a field to change the **solid button** background color          |
| Button text                  | This is a field to change the **solid button** text color                |
| Button background hover      | This is a field to change the **solid button** hover background color    |
| Button text hover            | This is a field to change the **solid button** hover text color          |
| **Secondary/Outline Button** | **Outline button**                                                       |
| Outline button               | This is the field to change the **outline button** text and border-color |
| Button background hover      | This is a field to change the **outline button** hover background color  |
| Button text hover            | This is a field to change the **outline button** hover text color        |
| **Text link**                |                                                                          |
| Text link hover              | You can add a hover color to the link                                    |

## Edit the existing color scheme group

<div><figure><img src="https://content.gitbook.com/content/7Hg8cYZOt66iWZS4tTz7/blobs/3pdiGWby9eJgS5d0P0E0/edit_color_scheme.png" alt=""><figcaption></figcaption></figure> <figure><img src="https://content.gitbook.com/content/7Hg8cYZOt66iWZS4tTz7/blobs/ik6YUMYOHKGija7RWYp4/edit_color_scheme-2.png" alt=""><figcaption></figcaption></figure></div>

## Change color to section

After adding the color scheme group, you can add/change the color scheme for the specific section

<figure><img src="https://content.gitbook.com/content/7Hg8cYZOt66iWZS4tTz7/blobs/0VV1HhrFi9j6ps1MoQY0/color_schme_1.png" alt=""><figcaption></figcaption></figure>

## Summary

<figure><img src="https://content.gitbook.com/content/7Hg8cYZOt66iWZS4tTz7/blobs/yJKQJygH5Ua3C3EzZroX/Untitled%20Project.gif" alt=""><figcaption></figcaption></figure>