# 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:

   <pre data-title="Copy"><code>&#x3C;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;
       }
   &#x3C;/style>
   </code></pre>
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 %}