Category appearance

Blockly provides a default categories UI, and with it some basic options for styling. If you want information about how to do more advanced styling/configuration of the UI check out the Customizing a Blockly toolbox codelab and the 2021 Toolbox APIs talk.

Themes

Themes allow you to specify all of the colours of your workspace at once, including the colours of your categories.

To use them, you have to associate your category with a particular category style:

JSONXML

{
  "kind": "category",
  "name": "Logic",
  "categorystyle": "logic_category"
}

<category name="Logic" categorystyle="logic_category"></category>

Colours

You can also specify the colour directly, but this is not recommended. The colour is a stringified number (0-360) specifying the hue. Note the British spelling.

JSONXML

{
  "contents": [
    {
      "kind": "category",
      "name": "Logic",
      "colour": "210"
    },
    {
      "kind": "category",
      "name": "Loops",
      "colour": "120"
    }
  ]
}

<xml id="toolbox" style="display: none">
  <category name="Logic" colour="210">...</category>
  <category name="Loops" colour="120">...</category>
  <category name="Math" colour="230">...</category>
  <category name="Colour" colour="20">...</category>
  <category name="Variables" colour="330" custom="VARIABLE"></category>
  <category name="Functions" colour="290" custom="PROCEDURE"></category>
</xml>

Note that we also support using localizable colour references.

Category CSS

If you want more powerful customization, Blockly also allows you to specify CSS classes for different elements of the default UI. You can then use CSS to style these.

The following elements types can have CSS classes applied to them:

• container - The class for the parent div for the category. Default blocklyToolboxCategory.
• row - The class for the div containing the category label and icon. Default blocklyTreeRow.
• icon - The class for the category icon. Default blocklyTreeIcon.
• label - The class for the category label. Default blocklyTreeLabel.
• selected - The class that is added to the category when it is selected. Default blocklyTreeSelected.
• openicon - The class added to an icon when the category has nested categories and is open. Default blocklyTreeIconOpen.
• closedicon - The class added to an icon when the category has nested categories and is closed. Default blocklyTreeIconClosed.

And here is how you specify the classes using either format:

JSONXML

Set the CSS class of a particular element type using the cssConfig property.

{
  "kind": "category",
  "name": "...",
  "cssConfig": {
    "container": "yourClassName"
  }
}

Set the CSS class of a particular element type by prepending 'css-' to it.

<category name="..." css-container="yourClassName"></category>