Colour themes¶

Pick a theme in Settings → Appearance. The choice is saved in your browser, so each computer (and each browser) keeps its own. The board drawing, plots, the 3D views and the Sim Lab redraw in the new colours straight away.

Every screenshot below shows the same finished board on its DRC & copper pour step.

Theme	Light or dark
Green & gold (match system)	Follows your system	The default: the dark or light green & gold theme, whichever your system uses
Green & gold dark	Dark
Green & gold light	Light
Neon	Dark	Hot pink and cyan, with glow
Greyscale	Dark	No colour anywhere, pictures included
Ocean	Dark	Deep navy with teal and coral
Purple mask	Dark	The solder-mask colour, with yellow silkscreen
Amber terminal	Dark	A retro phosphor screen in a monospaced font
Blueprint	Dark	Drafting-paper blue with a grid
Copper	Light	Warm, with a copper-brown board
Arctic	Light	Cool and crisp

Green & gold dark¶

WholeBoard in the Green & gold dark theme

Green & gold light¶

The board itself stays dark, so the copper and silkscreen read the same as in the dark theme.

WholeBoard in the Green & gold light theme

Neon¶

WholeBoard in the Neon theme

Greyscale¶

Images, the board and the 3D views are shown in grey too, and errors are underlined so they don't rely on colour.

WholeBoard in the Greyscale theme

Ocean¶

WholeBoard in the Ocean theme

Purple mask¶

WholeBoard in the Purple mask theme

Amber terminal¶

WholeBoard in the Amber terminal theme

Blueprint¶

WholeBoard in the Blueprint theme

Copper¶

WholeBoard in the Copper theme

Arctic¶

WholeBoard in the Arctic theme

Adding a theme¶

Themes are in wholeboard/web/themes.css. Each one is a :root[data-theme="name"] block that sets every colour token used by style.css:

Token	Used for
`--bg`, `--panel`, `--panel-2`, `--line`	Page background, cards, inset areas, borders
`--text`, `--muted`	Text and secondary text
`--accent`, `--accent-2`, `--on-accent`	Buttons and highlights, the second highlight colour, text on an accent
`--ok`, `--warn`, `--danger`, `--info`	Status colours
`--board-bg`, `--board-mask`	Behind the board drawing, and the solder mask
`--shadow`, `color-scheme`	Card shadow; `dark` or `light` for form controls and scroll bars

Copy an existing block, change the colours, and add an <option> with the same name to the themeSelect menu in wholeboard/web/index.html. Extra rules such as Neon's glow can follow the block, scoped with [data-theme="name"].