When you create a project, the Smart Themes function makes it easy for you to choose a color scheme for your project. This topic describes how to use the DataV smart theme feature.
My Themes
The My Themes tab offers a variety of functions, such as selecting default system themes and viewing and using saved themes. On the My Themes tab, you can perform the following operations:
View the values of color blocks in System Themes: Choose a system theme and move your pointer over a color block to view its value. This helps you determine the color scheme.
Manage saved themes
Operation
Descriptions
Select a saved theme
Click Saved Themes, and view the saved custom themes. Click a theme to preview the theme effect of a project.
ImportantBy default, the Saved Themes list is empty.
Edit the theme name
Click the icon to modify the name of the selected topic.
Delete a topic
Click the icon to delete the selected topic.
ImportantThe deleted theme cannot be recovered. Exercise caution when you delete a theme.
Change the color of a color block
Select a color block in a saved theme and click the icon. In the color picker box, select a color as needed. After confirmation, click an area outside the box to make the color change take effect.
NoteOn the My Themes tab, you can change the colors of all color blocks in the Saved Themes list. However, all color blocks in the System Themes list are fixed and cannot be changed.
Custom themes
The Custom Themes tab allows you to upload an image to generate multiple themes. On the Custom Themes tab, you can perform the following operations:
Change the value of a theme color: Choose a custom theme, click a color block in the theme, and then drag the color picker circle to adjust the block color.
Save Theme
On the Custom Themes tab, select a theme.
Click Save in the upper-right corner of the selected theme, modify the name of the saved theme, and then click OK to save the theme.
After you save the custom theme, you are redirected to the My Themes page. The Saved Themes page displays the custom theme.
Replace Image: On the Custom Themes page, click Replace Image or click an image in the Color Source field to select another image to generate a custom theme.
Procedure
- Log on to the DataV console.
On the My Visualizations page, click Use a template to create a PC-side visualization application or click Edit for an existing visualization application.
Click the icon in the upper-right corner of the canvas editor.
In the Beautify Toolbox panel, click Smart Theme.
If the Smart Themes feature is disabled, you can click the icon or click Quick Enable on the page to enable the feature.
NoteYou can click the icon on the left side of Smart Theme to enable or hide the feature.
On the Smart Themes page, configure a theme.
The Smart Themes tab includes two tabs: My Themes and Custom Themes.
My Theme
In the left-side navigation pane, choose
.Select a theme from the System Themes list.
Preview the effect of the theme on the canvas. After you are satisfied with the effect, click Confirm Application in the lower-right corner of the page.
If the visualization application contains components that do not support the smart theme feature, the system prompts the component type or component name that does not support the theme feature.
If you are not satisfied with the theme effect, click Cancel to cancel the current theme color scheme.
In the dialog box that appears, click OK or press Enter. The selected theme applies to your project.
ImportantThe applied theme overwrites the original project configurations. Exercise caution when you perform this operation.
Custom Theme
Click
.On the Custom Themes tab, click Click to upload an image in Color Source.
Upload a custom style map (currently, only image files in JPEG, JPG, and PNG formats are supported).
NoteAfter the image is uploaded, the system automatically generates theme palettes, and applies the default palette to the current project. You can preview the effect of the default theme palette in the current canvas.
In the uploaded custom style map, you can drag the color circle to change the color of the theme below.
Preview the theme effect in the canvas. If you are satisfied with the effect, click Apply.
If the project has a widget that does not support the Smart Themes function, the system will display the widget type or name.
If you are not satisfied with the theme effect, click Cancel to cancel the current theme color scheme.
In the dialog box that appears, click OK or press Enter. The selected theme applies to your project.
ImportantThe applied theme overwrites the original project configurations. Exercise caution when you perform this operation.
After you configure a theme, you can preview and publish the application to show the theme online.