# Appearance

The **Appearance** settings page allows platform administrators to fully customize the visual branding and interface styling of the dashboard. Visual customization is split between **Dark** and **Light** themes, each with separate values.

<figure><img src="https://835503362-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZxKMBw1IB53ZJ2sltFPC%2Fuploads%2FvK1MnsyRWHYfAkBobliG%2Fappearance%20(viewport).png?alt=media&#x26;token=181d0680-fcea-47a6-997b-266a53ac6b00" alt=""><figcaption></figcaption></figure>

These configurations apply globally across the admin panel and user views, depending on what's selected.

All changes can be previewed in real time using the built-in preview panel on the right side of the screen.

<figure><img src="https://835503362-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZxKMBw1IB53ZJ2sltFPC%2Fuploads%2FeIhYnqa1kAFRTWJLKCke%2Fappearance%20(appearance%20preview).png?alt=media&#x26;token=7e14d871-ed35-458c-9bcd-175fcbc81be3" alt=""><figcaption></figcaption></figure>

Final changes must be saved explicitly to apply them to the live environment.

## Brand Assets

Custom brand assets can be uploaded to reflect the platform's identity during login and in the browser.

### Favicon

Upload a favicon for the browser tab.

Accepted formats: `SVG` or `PNG`. Max. size: 100 KB.

### Login Banner Image

Upload a banner image for the login screen.

Accepted formats: `WEBP`, `JPG`, or `PNG`. Max. size: 1.5 MB.

### Dashboard Logo

Logo used within the dashboard UI.

Upload separate versions for **Dark** and **Light** themes to maintain visibility and contrast.

For e.g., use a light-colored logo for the dark theme, and a dark-colored logo for the light theme.

{% hint style="info" %}
**Hint**

Images that are too large or not in accepted formats will be rejected. Optimize assets before uploading.
{% endhint %}

## Theme and Styling

Controls the color scheme and interface theme for the platform.

The themes are:

* **Dark** - Activates dark mode styling.
* **Light** - Activates light mode styling.

{% hint style="info" %}
**Hint**

Each theme has its own settings. Switching modes will not overwrite or sync values between them.
{% endhint %}

### Color Scheme

Customize the primary visual elements under the selected theme:

* **Primary Color** - Brand highlight color for buttons and action elements.
* **Primary Text Color** - Used for headlines and main text.
* **Secondary Text Color** - Used for labels, hints, and less prominent text.
* **Background Color** - Controls the overall dashboard background.

### Navigation Color

Controls the sidebar appearance under the selected theme:

* **Side Navigation Background** - Sidebar background color.
* **Side Navigation Primary Text** - Text color for main menu items.
* **Side Navigation Secondary Text** - Text color for section headers or navigation groups.

### Component Colors

Defines styling general UI components:

* **Button Text Color** - Text and icon color used inside buttons.
* **Card Color** - Background color for card components.
* **Dialog Background** - Color used for modal windows and dialog popups.
* **Dropdown Background** - Background color for dropdowns.
* **Progress bar Color** - Gradient used for the progress bar. Requires two HEX values: one for the start color and one for the end color.

{% hint style="info" %}
**Hint**

Maintain contrast and acessibility across components, especially when using branded or bold colors.
{% endhint %}