# Themes A well-crafted user interface (UI) enriches user experience (UX) and fosters increased user engagement. In QuickDEV, you possess the flexibility to tailor the style of each component and leverage the theme feature to design the interface at either the app or workspace level. Furthermore, functionalities such as icon configuration and hint messages play a pivotal role in enhancing app interaction, thereby promoting a more user-friendly experience. The **theme feature** streamlines the process of configuring styles across all your apps within a workspace. This includes setting attributes such as the primary color of the apps and the default background color of containers. Once created, themes are readily accessible, and you can apply them to individual apps as needed. ## Create a theme Workspace administrators can access theme settings in QuickDEV. To do so, navigate to the QuickDEV homepage, then select **Settings** > **Themes**. From there, click on **+ Create** theme, provide a name for the theme, and choose one of the preset default themes as the starting point.
Preview the real-time theme effect on the right. To create or modify ECharts styles JSON for charts, you can utilize the [ECharts style Editor](https://echarts.apache.org/en/theme-builder.html) to streamline the process. This tool provides a convenient way to generate and preview styles before implementation, ensuring an efficient and visually pleasing design for your charts. ## Apply a theme By selecting the gear icon ⚙️ on the left sidebar of the app editor, you can modify the theme. Next, pick a theme using the options found in the **Theme setting**.
You can set the standard theme for all applications in a workspace using the Settings > **Themes option** on the QuickDEV homepage.
## Switching themes dynamically Both calling the method `theme.switchTo()` and accessing the global variable `theme` are possible to enable end users to utilize JavaScript to change the apps' theme to their own.There are three fields in the global variable `theme`. These are shown in the data browser. * The variables `id` and `name` are strings denoting the ID and name of the current theme. When these values are empty, the default theme is applied. * The variable `allThemes` is an array that encompasses all the information pertaining to the available themes within the current workspace. The method `theme.switchTo()` facilitates switching the theme on the end user's side, necessitating only a theme ID. If an empty string `""` is passed, the default theme is applied. Once the end user switches the theme, it will be stored in the user's browser local storage. Subsequently, this theme will supersede the default theme and be applied to all apps used in the same browser. --- # Agent Instructions: 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.quickdev.cloud/applications/styling/themes.md?ask= ``` 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.