Skip to main content

Customizing your themes

3. Workspace Theme​

In this section you will create a very basic halloween theme, then inject it to display in the workspace.

Themes​

Themes are a way to customize the look and feel of Blockly. Currently, we support customizing block colours, category colours and certain components through the Themes class.

A theme can be created using the constructor or by using defineTheme. Using defineTheme makes it easy to extend a pre existing theme and set all values with a single object.

Add the below code in index.js right before function start()

Blockly.Themes.Halloween = Blockly.Theme.defineTheme('halloween', {
  base: Blockly.Themes.Classic,
});

And then add a line to inject this theme in function start() in index.js

function start() {
  // Create main workspace.
  workspace = Blockly.inject('blocklyDiv', {
    toolbox: toolboxCategories,
    theme: Blockly.Themes.Halloween,
  });
}
note

At this point, we have just created a new theme. But it does not have any customizations. We will do that next.