# Colors

**Persona** supports customizing different **Colors** of the website.

## Colors

You can change colors:

* Secondary button background-color and hover color
* Block **Available for hire** (text color,  background color, border color)
* Accent color in dark mode.

#### To customize: <a href="#to-customize" id="to-customize"></a>

1. Access the **Settings** > **Code Injection** from the admin menu.
2. Click **Open**
3.  In the provided space, specify the desired background-colors using the appropriate CSS variable. For example:

    {% code title="Copy" %}
    ```
    <style>
        :root {   
            --secondary-btn-bg: #efefef;
            --secondary-btn-hover: #e7e7e7;
            --avl-for-hire-text: #000000;
            --avl-for-hire-bg: #ebffe2;
            --avl-for-hire-stroke: #cfeac4;
            --dm-accent-color: #3AA70B;
        }
    </style>
    ```
    {% endcode %}
4. Click **Save**

{% hint style="info" %}
If the variable  `--secondary-btn-bg` is not defined, the default color is  `#efefef`

If the variable  `--secondary-btn-hover` is not defined, the default color is `#e7e7e7`

If the variable  `--avl-for-hire-text` is not defined, the default color is `#000000`

If the variable  `--avl-for-hire-bg` is not defined, the default color is `#ebffe2`

If the variable  `--avl-for-hire-stroke` is not defined, the default color is `#cfeac4`&#x20;

If the variable  `--dm-accent-color` is not defined, the default color is `ghost-accent-color`
{% endhint %}

