Design tokens

Colour roles

Published on

prefers-color-scheme

light

prefers-contrast

no-preference

text link bold inserted deleted highlighted

text link bold inserted deleted highlighted

text link bold inserted deleted highlighted

text link bold inserted deleted highlighted

text link bold inserted deleted highlighted

text link bold inserted deleted highlighted

prefers-contrast

more

text link bold inserted deleted highlighted

text link bold inserted deleted highlighted

text link bold inserted deleted highlighted

text link bold inserted deleted highlighted

text link bold inserted deleted highlighted

text link bold inserted deleted highlighted

prefers-color-scheme

dark

prefers-contrast

no-preference

text link bold inserted deleted highlighted

text link bold inserted deleted highlighted

text link bold inserted deleted highlighted

text link bold inserted deleted highlighted

text link bold inserted deleted highlighted

text link bold inserted deleted highlighted

prefers-contrast

more

text link bold inserted deleted highlighted

text link bold inserted deleted highlighted

text link bold inserted deleted highlighted

text link bold inserted deleted highlighted

text link bold inserted deleted highlighted

text link bold inserted deleted highlighted

Theme colours

Override any of these on :root; every role is derived from them with oklch(from …).

:root {
	--hex-none: #636363;
	--hex-main: #6a4ab7;
	--hex-info: #1762b6;
	--hex-pass: #2c761d;
	--hex-warn: #835b00;
	--hex-fail: #b52010;

	--hex-ins: #526e2f;
	--hex-del: #a23e38;
	--hex-mark: #6f6424;
}

References