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