Stylesheet Generrrat'r

T' get started, first select a color variant from th' variant selector 'n th' lower left sidebar that fits ye best as a start'n point.

Th' graph be interactive an' reflects th' current colors. Ye can click on any o' th' colored boxes t' adjust th' respective color. Th' graph an' th' plank will update accordingly.

Th' arrowed lines reflect how colors be inherited through different parts o' th' theme if th' descendant isn’t overwritten. If ye want t' delete a color an' let it inherit from its parent, just delete th' value from th' input field.

T' better understand this, select th' neon variant an' modify th' different head'n colors. There, colors fer th' head'ns h2, h3 an' h4 be explicitly set. h5 be not set an' inherits its value from h4. h6 be also not set an' inherits its value from h5.

Once you’ve changed a color, th' variant selector will show a “My custom variant” entry an' yer changes be stored 'n th' browser. Ye can browse t' other planks an' even close th' browser without los'n yer changes.

Once ye be satisfied, ye can download th' new variants file an' copy it into yer site’s assets/css directory.

Opt'n Afterwards, ye have t' adjust th' themeVariant opt'n 'n yer hugo.toml t' yer chosen file name. For example, if yer new variants file be named theme-my-custom-variant.css, ye have t' set themeVariant='my-custom-variant' t' use it.

See th' docs fer further configurat'n opt'ns.