# UI Customization Guide

{% hint style="info" %}
*Disclaimer*: It's important to note that the UI elements you customize within this section are not permanently altered until you update your configuration file. Changes made here are for preview purposes only.
{% endhint %}

{% hint style="danger" %}
**Please note  you need to add these Colors in the Config.UI Section!**
{% endhint %}

<div align="center" data-full-width="true"><figure><img src="https://4095800857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaEoE1zhcckAOIOLUrEx5%2Fuploads%2Fitn9bMr6cWkwf8q3fVQ5%2FScreenshot%202023-11-24%20062222.png?alt=media&#x26;token=05aefc8d-5c22-406e-9e3e-26ad47d00cd6" alt="" width="476"><figcaption><p>Preview Mode UI</p></figcaption></figure></div>

## **Accent Color & Accent Hover Color**

Here, you can modify the accent colors used throughout the UI to match your server's style and theme.&#x20;

## **Dark and Light Mode**

Toggle between dark and light modes to adjust the background theme of the UI.

## **Background Map Customization**

*Background Map Customization*: Customize the background map by replacing the image located at `\web\build\assets\background_darkmode.png` for dark mode or `\web\build\assets\background_whitemode.png` for light mode. **When changing the background, use the existing image as a template to maintain dimensions.** If you'd like to add a different image, you can also modify the "background" color in the Preview Mode and then update the corresponding values in the configuration.

## **Logo Replacement**

*Logo Replacement*: Modify the logo by changing the Logo Extension in the configuration to `.gif` or `.svg`. Then, replace the logo image at `\web\build\assets\logo.gif` or `\web\build\assets\logo.svg`. If you have a PNG logo, you can easily convert it to a GIF for animated logos, providing additional visual appeal.

{% hint style="success" %}
Feel free to experiment with these UI customization options to create a unique and visually appealing experience for your players. Remember to update your configuration file to make these changes permanent.
{% endhint %}
