# Theme Customisation

The Theme Customiser feature lets you personalise and adjust the application's visual appearance in real-time. Here’s a breakdown of the elements included in the Theme Customiser:

### Skin Options

The Skin options for theme customisation provide various aesthetic choices for users. These options enhance both personalisation and usability: 

* **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%2FInGXrHaKr4PfLusQqEQq%2FThem%20Customise.gif?alt=media&#x26;token=bfe441c8-625c-43d0-8670-319b5402f292" alt=""><figcaption></figcaption></figure>

### Content Width

The content width options allow you to control how the content is displayed.&#x20;

* **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.

### Router Transition

This option allows users to select the transition effects when navigating between different sections of the application. The following transition effects 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>