Block Themes

Enabling the hidden dark theme

First, let's enable the hidden dark theme.

In scratch-gui, go to src/components/menu-bar/settings-menu.jsx. In that file, there is a variable called enabledColorModes, find it and add DARK_THEME.

scratch-editor/packages/scratch-gui/src/components/menu-bar/settings-menu.jsx

const enabledColorModes = [DEFAULT_MODE, DARK_MODE, HIGH_CONTRAST_MODE];

Make sure you import it too:

scratch-editor/packages/scratch-gui/components/menu-bar/settings-menu.jsx

import {DARK_MODE, DEFAULT_MODE, HIGH_CONTRAST_MODE, colorModeMap} from '../../lib/settings/color-mode/index.js';

If we want Scratch to remember the theme, we need to make Scratch consider it a valid theme. To do this we need to add it to isValidColorMode in src/lib/settings/color-mode/persistence.js:

scratch-editor/packages/scratch-gui/src/lib/settings/color-mode/persistence.js

const isValidColorMode = colorMode => [DEFAULT_MODE, DARK_MODE, HIGH_CONTRAST_MODE].includes(colorMode);

Make sure you import it for this file too:

scratch-editor/packages/scratch-gui/src/lib/settings/color-mode/persistence.js

import {DEFAULT_MODE, DARK_MODE, HIGH_CONTRAST_MODE} from '.';

Creating our own theme

Let's create a theme that makes Scratch harder by making all the colours the same (well two colours, foreground and background).

Creating the theme

Copy and paste src/lib/settings/color-mode/default/index.js to a new src/lib/settings/color-mode/hard-mode/index.js and make some changes to it. I am going to make all the colours either black (foreground/text and blocks background) or white (background).

Registering the theme

In src/lib/settings/color-mode/index.js, add these:

scratch-editor/packages/scratch-gui/src/lib/settings/color-mode/index.js

// ...

import {blockColors as defaultColors} from './default';
import {blockColors as hardModeColors} from './hard-mode';

// ...

const DEFAULT_MODE = 'default';
const HIGH_CONTRAST_MODE = 'high-contrast';
const DARK_MODE = 'dark';
const HARD_MODE = 'hard-mode';

// ...

const messages = defineMessages({
    // ...
    [HARD_MODE]: {
        id: 'gui.theme.hardMode',
        defaultMessage: 'Hard Mode',
        description: 'label for hard mode'
    }
});

const colorModeMap = {
    // ...
    [HARD_MODE]: {
        blocksMediaFolder: 'blocks-media/default',
        colors: mergeWithDefaults(hardModeColors),
        extensions: {},
        label: messages[HARD_MODE_THEME]
    }
};

// ...

export {
    DEFAULT_MODE,
    DARK_MODE,
    HIGH_CONTRAST_MODE,
    HARD_MODE,
    defaultColors,
    getColorsForMode,
    colorModeMap
};

Enabling the theme

This is the same process as the dark mode theme.

Spoiler: The amazing hard mode Scratch editor:

Completed Files

Component	File	Download
scratch-gui	src/lib/settings/color-mode/index.js	index.js
scratch-gui	src/components/menu-bar/settings-menu.jsx	theme-menu.jsx
scratch-gui	src/lib/settings/color-mode/hard-mode/index.js	index-hardmode.js
scratch-gui	src/lib/settings/color-mode/persistence.js	persistence.js

---

Scratch commit hashes at the time of this tutorial

scratch-editor:     810ac12eaa1a1eb19d05fcb37f486ad1c4c56314
scratch-blocks:     bb2f7ce297e2552767b531c212b18ee4f046e92d