One of the key features of Blockly's interface is its ability to be customized, allowing developers to create a unique look and feel for their application that aligns with their brand or user experience goals. There are three main ways to customize Blockly's appearance: block colours, themes, and renderers.
Block colour
The main colour of a block can be set in the block definition. If set this way, secondary colours for the block (such as border colour) will be calculated automatically. This is the simplest way to modify the appearance of blocks.
→ Learn more about setting a block's colour.
Themes
Themes give additional control over options like the colour and opacity of blocks, toolboxes, workspaces, and other components. A theme can be set dynamically for a workspace, and it contains categories of styles that can be applied to groups of blocks.
→ Learn more about using Blockly-provided themes or creating your own theme.
Renderers
A renderer is an object in Blockly that controls how blocks are drawn onto the workspace. The renderer controls the shape of blocks and connection points.
→ Learn more about using Blockly-provided renderers or creating your own renderer.
Summary
If you want to change the colour of a block, use the block definition. If you want to change the colour of something else, or be more specific about block colours, try a theme. If you want to change the shape of something, try a renderer.