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

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:

   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>

4. Click Save

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

If the variable --dm-accent-color is not defined, the default color is ghost-accent-color