> 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/theme-and-animation.md).

# Theme & Animation

The Theme & Animation settings allow you to customise 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="https://4148303057-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxJO1GSxhJIrS0metPeFt%2Fuploads%2FP4YKhPfIhegcXhpnEze9%2FWhatsAppVideo2026-05-14at04.01.06-ezgif.com-optimize.gif?alt=media&amp;token=4ef5a3bc-7018-462f-8a5f-dae5d7df205a" 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="https://4148303057-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxJO1GSxhJIrS0metPeFt%2Fuploads%2FDWZqyodBOlrHjbSpHgbF%2FScreenshot%202026-05-14%20040758.png?alt=media&amp;token=6801ebb1-1dcc-41fd-b1c2-7afda683bd71" alt=""><figcaption></figcaption></figure>