Understanding the theme.json file

The "theme.json" file is the master theme definition file which contains all of the available theme settings. It can be used as a template or example that shows how each supported control and individual property can be set through a theme. The file is well structured and shall be easy to follow. Here are a few points worth mentioning:

  • Every supported control and their supported properties are listed and set with default values (given as examples) in the theme.json file; and the unsupported control or properties are not listed currently. The supported controls and properties are named literally so developers can find and understand them easily.

  • Developers are not recommended to directly adjust the property values in the theme.json file, instead, they should create a custom theme file by copying the content from theme.json and adjust the property values in the custom file to see the effects.

  • "drawing"=true in each section means that the settings in the section will take effect after you apply the theme. You can set the node to false if you want to use the "no-theme" style for the settings in the section.

    Note that the value for "drawing" can only be true or false (all letters in lower case).

  • "border" can be set to 0, 1, or 2. Unless otherwise explained in this tutorial, 0 means whether to draw borders relies on the Border setting in the PB IDE; 1 means that borders will always be drawn; 2 means no border.

  • The other node values will be either hex color value or specific image file to be assigned to the node.

You will find that you can configure much more visual elements in the theme.json file for your application than before. See Understanding what additional features provided by the theme for the additional UI properties that you can set in the theme.json file.