Current version 22.8.0

Card themes

theme accepts tg2-light (default), tg2-dark, tg-light and tg-dark. grey is a tg2-only surface — under tg-light / tg-dark it resolves to the same colour as white rather than throwing, so the input is inert there instead of broken.

radius resolves per theme. tg2-light / tg2-dark use the new scale; tg-light / tg-dark use the radii the legacy card is given in FrEnd today, and default to large (8px) so an unmigrated page keeps the legacy card's corner.

Card radius per theme
radiustg2-light / tg2-darktg-light / tg-dark
small4px0
medium8px (default)6px
large16px8px (default)
extra-large20px16px

Dark mode has not been reviewed by design. It is a work in progress. Do not use.

tg2-light

White Default

Content

White bordered

Content

Grey

Content

Grey bordered

Content

tg2-dark Beta

White Default

Content

White bordered

Content

Grey

Content

Grey bordered

Content

tg-light

White Default

Content

White bordered

Content

Grey

Content

Grey bordered

Content

tg-dark Beta

White Default

Content

White bordered

Content

Grey

Content

Grey bordered

Content

Setting up themes

To apply a theme to your app, see Setup › Themes.

Proudly made by © 2026 Trade Me Limited