# 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 */
--light-blue: 33 255 222; /* #21ffde */
--silver-default: 192 192 192; /* #c0c0c0  */
--silver-secondary: 152 151 151; /* #989797 */
--bronze-default: 203 158 96; /* #cb9e60 */
--bronze-secondary: 151 117 71; /* #977547 */
--gold-default: 253 209 64; /* #fdd140 */
--gold-secondary: 186 152 43; /* #ba982b */
--disabled: 83 83 83; /* #535353 */
--modal-background: 25 25 31; /* #19191f */
--background-body: 11 19 32; /* #0b1320 */
--background-border: 49 71 90; /* #31475a */

/*!!! 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>

<div data-full-width="false"><figure><img src="https://1714064783-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6r0GTBPEC7Oy1kbdLspK%2Fuploads%2FEaSTtlKOeogKVaAp3p1d%2Fimage.png?alt=media&#x26;token=8a710a5d-42ca-459d-833c-c16c5eb4c3b1" alt=""><figcaption><p>Miner job</p></figcaption></figure></div>