All Products
Search
Document Center

DataV:Smart themes

Last Updated:Apr 27, 2023

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.

    Important

    By 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. 删除主题

    Important

    The 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. 颜色修改替换功能

    Note

    On 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: image..png

  • 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. image..png

  • Save Theme

    1. On the Custom Themes tab, select a theme.

    2. 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. image..png

    3. After you save the custom theme, you are redirected to the My Themes page. The Saved Themes page displays the custom theme. image..png

  • 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. image..png

Procedure

  1. Log on to the DataV console.
  2. On the My Visualizations page, click Use a template to create a PC-side visualization application or click Edit for an existing visualization application.

  3. Click the 美化工具箱icon in the upper-right corner of the canvas editor.

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

    Note

    You can click the 显隐图标icon on the left side of Smart Theme to enable or hide the feature.

  5. On the Smart Themes page, configure a theme.

    The Smart Themes tab includes two tabs: My Themes and Custom Themes.

    • My Theme

      1. In the left-side navigation pane, choose My Themes> System Themes.

      2. Select a theme from the System Themes list. 选择系统主题

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

      4. In the dialog box that appears, click OK or press Enter. The selected theme applies to your project.

        Important

        The applied theme overwrites the original project configurations. Exercise caution when you perform this operation.

    • Custom Theme

      1. Click Custom Theme.

      2. On the Custom Themes tab, click Click to upload an image in Color Source. 色彩来源入口

      3. Upload a custom style map (currently, only image files in JPEG, JPG, and PNG formats are supported).

        Note

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

      4. In the uploaded custom style map, you can drag the color circle to change the color of the theme below. image..png

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

      6. In the dialog box that appears, click OK or press Enter. The selected theme applies to your project.

        Important

        The applied theme overwrites the original project configurations. Exercise caution when you perform this operation.

  6. After you configure a theme, you can preview and publish the application to show the theme online.