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;
}