DocsDesignTheme builder

Theme builder

Start from a design language, change the colours, shape, shadow and type, check the contrast, and download theme.css. It is one file of custom properties: load it after xoong and every component follows.

1. Pick a preset

2. Customise

Colour schemes

Colour

Borders, muted text, tints and the inverse colours are derived from these, so they always stay in tune.

Shape and size

Corner radius

Control heightSmall and large controls scale from this.

Border width

Focus ring width

Shadow

Style

Strength

Type

Font

Base size

Font names fall back to system fonts. To use a web font, self-host it and add the @font-face yourself: the theme only names the family.

Calm

Name	E-mail	Role
Ada Lovelace	ada@example.org	admin
Grace Hopper	grace@example.org	editor
Edsger Dijkstra	edsger@example.org	viewer

NameAs shown in the list.

E-mailUse a company address.

Role

adminsuccesswarningerror

Heads up. This is how a notice looks.

Could not save. Try again.

Saved

3. Check the contrast

Scheme	Pair	Ratio	Needs	Result

4. Download

Put the theme in its own CSS layer (xoong-theme, after the xoong layers)

Load it after xoong's own styles:

<link rel="stylesheet" href="/@xoong/ui/src/xoong.css">
<link rel="stylesheet" href="/@xoong/controls/controls.css">
<link rel="stylesheet" href="theme.css">

To theme one region only, copy the declarations onto a selector such as .sidebar instead of :root. Derived tokens (focus rings, shadows) are defined in the theme itself, so they follow.