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.

Blockly is already imported at the top of src/index.js, so you have access to Blockly.Theme and the built-in Blockly.Themes. Add the code below in src/index.js, after the blocks and generator are registered and before the call to Blockly.inject:

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

Then update the existing Blockly.inject call to use this theme:

const ws = Blockly.inject(blocklyDiv, {
  toolbox,
  theme: Blockly.Themes.Halloween,
});
note

At this point, we have just created a new theme. But it does not have any customizations, so the workspace will look the same as before. We will add customizations next.