Customizing your themes

6. Customize Block Styles

A block style currently only holds three different colour properties. They are 'colourPrimary', 'colourSecondary' and 'colourTertiary'. This value can either be defined as a hex value or as a hue. For more information on block styles visit our themes documentation.

Add a blockStyles section to the theme definition in src/index.js so that it now looks like the below. There is one block style for each category in the sample app's toolbox:

Blockly.Themes.Halloween = Blockly.Theme.defineTheme('halloween', {
  base: Blockly.Themes.Classic,
  categoryStyles: {
    logic_category: {
      colour: '#8b4513',
    },
    loop_category: {
      colour: '#85E21F',
    },
    math_category: {
      colour: '#542788',
    },
    text_category: {
      colour: '#FE9B13',
    },
    list_category: {
      colour: '#4a148c',
    },
    variable_category: {
      colour: '#cc0000',
    },
    procedure_category: {
      colour: '#1b5e20',
    },
  },
  blockStyles: {
    logic_blocks: {
      colourPrimary: '#8b4513',
      colourSecondary: '#ff0000',
      colourTertiary: '#C5EAFF',
    },
    loop_blocks: {
      colourPrimary: '#85E21F',
      colourSecondary: '#ff0000',
      colourTertiary: '#C5EAFF',
    },
    math_blocks: {
      colourPrimary: '#542788',
      colourSecondary: '#9a7fc7',
      colourTertiary: '#cdb6e9',
    },
    text_blocks: {
      colourPrimary: '#FE9B13',
      colourSecondary: '#ff0000',
      colourTertiary: '#C5EAFF',
    },
    list_blocks: {
      colourPrimary: '#4a148c',
      colourSecondary: '#AD7BE9',
      colourTertiary: '#CDB6E9',
    },
    variable_blocks: {
      colourPrimary: '#cc0000',
      colourSecondary: '#ff6666',
      colourTertiary: '#ffcccc',
    },
    procedure_blocks: {
      colourPrimary: '#1b5e20',
      colourSecondary: '#4caf50',
      colourTertiary: '#c8e6c9',
    },
  },
  componentStyles: {
    workspaceBackgroundColour: '#ff7518',
    toolboxBackgroundColour: '#F9C10E',
    toolboxForegroundColour: '#fff',
    flyoutBackgroundColour: '#252526',
    flyoutForegroundColour: '#ccc',
    flyoutOpacity: 1,
    scrollbarColour: '#ff0000',
    insertionMarkerColour: '#fff',
    insertionMarkerOpacity: 0.3,
    scrollbarOpacity: 0.4,
    cursorColour: '#d0d0d0',
    blackBackground: '#333',
  },
});

Test it

Refresh the page, then click on different categories and drag out blocks. You should see the colours that you applied show up.