This topic describes how to use the Smart Themes function of DataV. When you create a project, the Smart Themes function makes it easy for you to choose a color scheme for your project.

Procedure

  1. Log on to the DataV console.
  2. On the Projects tab, create a project or move your pointer over an existing project and click Edit.
  3. In Canvas Editor, click the Beautify Toolbox icon in the toolbar.
    Beautify Toolbox
  4. In the left pane, click the Smart Themes tab.

    If the Smart Themes function is disabled, you can click Disable icon or Quick Applied to enable this function.

    Note You can click Enable/disable icon on the left of Smart Themes to enable or disable this function.
  5. On the Smart Themes tab, configure themes as needed.

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

    • My Themes
      1. On the My Themes tab, click System Themes.
      2. Select a theme from the System Themes list. Select a system theme
      3. Preview the theme effect in the canvas. If you are satisfied with the effect, click Apply.
        Warning The applied theme overwrites the original project configurations. Exercise caution when you perform this operation.
        If the project has a widget that does not support the Smart Themes function, the system will display the widget type or name.Smart Themes not supported

        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.

        For more information, see My Themes.

    • Custom Themes
      1. Click the Custom Themes tab.
      2. On the Custom Themes tab, click Click to upload an image in Color Source. Color Source
      3. Upload an image in JPEG, JPG, or PNG format.
        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 image, you can drag the color picker circle to change the theme colors. For more information, see Custom Themes. Example of theme generation based on an uploaded image
      5. Preview the theme effect in the canvas. If you are satisfied with the effect, click Apply.
        Warning The applied theme overwrites the original project configurations. Exercise caution when you perform this operation.

        If the project has a widget that does not support the Smart Themes function, the system will display the widget type or name.

        Smart Themes not supported

        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.

        For more information, see Custom Themes.

  6. After the theme is configured, you can click the Preview and Publish icons to view the theme effect online.

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. Values of color blocks
  • Manage saved themes
    Operation Description
    Select a saved theme Click Saved Themes, and view the saved custom themes. Click a theme to preview the theme effect of a project.
    Notice By default, the Saved Themes list is empty.
    Edit the theme name Click Edit icon to change the name of the selected theme. Edit the theme name
    Delete a theme Click Delete icon to delete the selected theme. Delete a theme
    Warning The deleted theme cannot be recovered. Exercise caution when you delete a theme.
    Change the color of a color block Choose a color block in a saved theme and click Edit icon in the color block. 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. Change the color of a color block
    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:
  • 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 a theme
    1. On the Custom Themes tab, select a theme.
    2. Click Save, change the name of the saved theme, and click OK to save the current theme.
    3. The system automatically navigates to the My Themes tab, and the saved custom theme is listed in Saved Themes.
  • Replace an image: On the Custom Themes tab, click Replace or click the image in Color Source to select another image.