# UI Color Customization

## <mark style="color:yellow;">Usage</mark>

{% stepper %}
{% step %}

### Enter the folder with the script

{% endstep %}

{% step %}

### Enter <kbd>html</kbd> folder

{% endstep %}

{% step %}

### Open the <kbd>colors.css</kbd> file

{% endstep %}
{% endstepper %}

#### The code looks like this

```css
    /* YOU CAN'T USE A COMMA BETWEEN RGB */
    --primary: 253 209 64; /* #fdd140 */
    --background: 32 46 59; /* #202e3b */
    --background-body: 11 19 32; /* #0b1320 */

    /*!!! YOU MUST USE A COMMA BETWEEN RGB !!!*/
    --primary-rgba: 253, 209, 64; /* #fdd140 */
    --grid-dark-rgba: 11, 19, 32; /* #0b1320 */
```

#### To customize the UI for yourself, simply edit the RGB color.

{% hint style="danger" %}
If you are editing the primary color, we recommend changing it in two locations!
{% endhint %}

## <mark style="color:yellow;">Examples of color changes</mark>

<figure><img src="https://1714064783-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6r0GTBPEC7Oy1kbdLspK%2Fuploads%2F7OZ6pUXdH3f1frh5uMaa%2Fimage.png?alt=media&#x26;token=899ae8e9-1043-4539-ae20-7561a8e05a79" alt=""><figcaption></figcaption></figure>