Skip to main content

Customizing your themes

1. Codelab overview​

What you'll learn​

In this codelab you will learn how to:

  • Add component styles.
  • Add a category style.
  • Add a block style.

What you'll build​

You'll start from the Blockly sample app and give it a custom "Halloween" theme, customizing the colours of the workspace components, the toolbox categories, and the blocks themselves.

A Blockly workspace with a custom orange and purple Halloween theme.

The code samples are written in ES6 syntax. You can find the code for the completed theme codelab on GitHub.

What you'll need​

  • A browser.
  • A text editor.
  • Basic knowledge of HTML, CSS, and JavaScript.
  • node.js and npm installed (instructions).
  • Comfort using the command line/terminal.

This codelab is focused on Blockly's theme extension. Non-relevant concepts are glossed over and provided for you to simply copy and paste.