# Overview

Karedi's UI is build from individual components with [*main editor*](https://karedi.gitbook.io/karedi/user-interface/middle-components/main-editor) being the most important one.

Some components are organized into groups of tabs e.g. "Tracks" and "Audio" are in the same group. Only one of the tabs from a given group can be active at the same time.

This is the default view:

<figure><img src="https://2464591649-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWYWuwgmUrVIBcYKbiiso%2Fuploads%2FIfJUAIRDSrJLrrOQiZoh%2Fimage.png?alt=media&#x26;token=dd99b28f-24aa-4e41-bbb7-4bc17023dba4" alt=""><figcaption></figcaption></figure>

And with tab groups switched to the hidden tabs (just click on a tab caption to show it):

<figure><img src="https://2464591649-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWYWuwgmUrVIBcYKbiiso%2Fuploads%2F2o8rp7qWibGz6IZmKsAr%2Fimage.png?alt=media&#x26;token=225627f1-1dfc-407a-a53e-09bb5b4a96c8" alt=""><figcaption></figcaption></figure>

Dragging tabs from one group to another is not supported. You can however resize the components freely:

<figure><img src="https://2464591649-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWYWuwgmUrVIBcYKbiiso%2Fuploads%2FkSqbu4jp8fVBXuVLkUEY%2Fimage.png?alt=media&#x26;token=77facb59-480a-4536-ab1b-bb166f684c51" alt=""><figcaption></figcaption></figure>

## Dark mode

By default Karedi is opened in the light mode. There is also a dark mode available:

<figure><img src="https://2464591649-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWYWuwgmUrVIBcYKbiiso%2Fuploads%2FhTmDXfPt3Dhdp8Xba8Sz%2Fimage.png?alt=media&#x26;token=e93a1e44-548d-431d-940f-99e9df9245c8" alt=""><figcaption></figcaption></figure>

You can switch to the dark mode by:

1. Going to the menu *View* -> *Switch mode*
2. Clicking moon (if you are in light mode) or sun (if you are in dark mode) icon in the [*toolbar*](https://karedi.gitbook.io/karedi/user-interface/toolbar)

<div align="left"><figure><img src="https://2464591649-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWYWuwgmUrVIBcYKbiiso%2Fuploads%2F36peoatzefOrRxDGkt0h%2Fimage.png?alt=media&#x26;token=e84fba03-fe9b-4f78-9660-a58705633989" alt="" width="341"><figcaption><p>Switch to the dark mode</p></figcaption></figure></div>

<div align="left"><figure><img src="https://2464591649-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWYWuwgmUrVIBcYKbiiso%2Fuploads%2FBzWzQcCR6GZs4pmbw7to%2Fimage.png?alt=media&#x26;token=eb594ddb-9c98-4570-8730-468799538324" alt="" width="323"><figcaption><p>Switch to the light mode</p></figcaption></figure></div>

Last used mode is remembered and will be applied on application start up.
