> For the complete documentation index, see [llms.txt](https://docs.vergeos-demo.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.vergeos-demo.com/knowledge-base/system-administration/customizing-the-user-interface.md).

# Customizing the User Interface

VergeOS supports custom branding at every tenancy layer (if permitted), using the **Themes** feature. This guide walks you through modifying the user interface (UI) with your organization’s branding elements—including logos, colors, and favicons.

{% hint style="info" %}
**What's New in VergeOS v26**

* **Light and Dark Modes**: VergeOS includes default light and dark themes, and supports custom themes based on either mode.
* **Multiple Theme Variants**: Administrators can create multiple branded themes, such as light and dark versions, and make them available for user selection.
  {% endhint %}

## How to Change your UI Branding

Follow these steps to customize your VergeOS environment:

1. **Upload Logo and Icon files**:
   * Upload the desired logo in `.png` or `.jpg` format. For best results, use a **144x36** image for the large logo and **44x44** for the small logo.
   * If desired, upload a favicon in `.ico` format.

{% hint style="success" %}
**Instructions for uploading files to the vSAN can be found** [**here**](/run-the-platform/storage/uploading-files-to-vsan.md)
{% endhint %}

2. **Create one or more Custom Themes**: to implement your branding\
   Refer to the [Themes Product Guide](/run-the-platform/system-administration/themes.md) for instructions.
3. **Control User Theme Options**:\
   All enabled themes are presented as options for users to select (from the utility bar). **To enforce exclusive custom branding, you must disable the standard default VergeOS themes (light/dark).**

## Best Practices for UI Customization

### Visual Design

* **Create Light and Dark Variants:** Offer both light and dark versions of your custom theme to support different lighting environments and user preferences. Light mode enhances visibility in bright settings, while dark mode reduces glare and can conserve battery life on OLED devices.
* **Consistency**: Ensure that the colors and logos you choose for the branding align with your organization's style guide for consistency.
* **Logo Dimensions**: Upload logos with the correct dimensions to prevent distortion or scaling issues.

### Accessibility & Readability

* **Readability**: Use contrasting colors for text and background elements to ensure readability across different devices.
* **Test Across Themes:** Verify that all UI elements remain legible and visually coherent in both light and dark modes.

### Theme Management & User Experience

* **Preview Before Enabling**: Setting a new theme to disabled initially can give you time to verify branding guidelines and usability before enabling it for user selection.
* **Disable Unused Themes:** Users can select from all enabled themes. To enforce exclusive branding, disable the default VergeOS themes (light/dark); remove any outdated custom themes you no longer wish to offer.
* **Name Themes Clearly**: Use descriptive names (e.g., “Acme Light” or “Acme Dark”) to help users easily identify the appropriate version.

***

By following these steps and using the available options, you can fully customize the VergeOS UI to reflect your organization's brand. Make sure to save your settings once you're satisfied with the changes.

***

{% hint style="info" %}
**Document Information**

* Last Updated: 2025-10-29
* vergeOS Version: 26.0
  {% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.vergeos-demo.com/knowledge-base/system-administration/customizing-the-user-interface.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.