> For the complete documentation index, see [llms.txt](https://docs.udara360.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.udara360.io/getting-started/customisation.md).

# Customisation

The Theme & Animation settings allow you to customize the visual appearance and transition effects of your Udara360 interface. This guide will help you configure your theme and animation preferences under Account Settings.

### Accessing Theme & Animation Settings

1. Click your profile name at the top right of the screen
2. Select **Settings** from the dropdown
3. Click **Preferences** in the left sidebar
4. Scroll down to the **Theme** and **Animation** sections

### Skin Options

The Skin setting allows you to choose the color scheme of your Udara360 interface. Select your preferred option by clicking the radio button next to it. The following options are available:

* **Light:** The "Light" option offers a bright colour scheme with a clean interface.
* **Dark:** The "**Dark**" setting is ideal for low-light environments, reducing eye strain. 
* **Bordered:** The "**Bordered**" option adds distinct borders for better organisation. 
* **Semi Dark**: The "**Semi Dark**" theme offers a versatile balance between light and dark, adapting to different lighting conditions.

<figure><img src="/files/CC8eXD8V5gSd62zhandn" alt=""><figcaption></figcaption></figure>

### Content Width

The Content Width setting allows you to control how content is displayed across your screen. Select your preferred option by clicking the radio button next to it:

* **Full Width**: The content stretches to fill the entire width of the screen. &#x20;
* **Boxed**:  The content is limited to a fixed width, creating margins on either side of the application.

### Animation

The Router Transition setting allows you to choose the transition effect when navigating between pages in Udara360. Click the **Router Transition** dropdown and select your preferred effect. The following options are available:

<table><thead><tr><th width="236">Transition Type</th><th>Description</th></tr></thead><tbody><tr><td><strong>Zoom Fade</strong></td><td>The page fades and zooms as it transitions.</td></tr><tr><td><strong>Fade</strong></td><td>A simple fade transition between pages.</td></tr><tr><td>Fade Bottom</td><td>The page fades in from the bottom.</td></tr><tr><td>Slide Fade</td><td>Pages slide with a fading effect during the transition.</td></tr><tr><td>Zoom Out</td><td>The current page zooms out as the next page loads (currently selected in the screenshot).</td></tr><tr><td>None</td><td>No transition effect is applied.</td></tr></tbody></table>

<figure><img src="/files/R0odfryT4EIcYblynK8O" alt=""><figcaption></figcaption></figure>


---

# 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.udara360.io/getting-started/customisation.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.