Themes & Icons

#Light and dark

Clay has a light and a dark theme. It starts with the reader’s system setting and switches along when the system does. The sun or moon button in the navbar switches by hand; the choice is remembered in the browser and applied before the page is drawn, so pages never flash in the wrong theme.

Code blocks are highlighted in two color schemes and switch together with the site.

#Icons

Clay uses Font Awesome for icons: pages, folders, the start page and navbar links. Write the icon’s classes, as shown on the icon’s page on fontawesome.com:

icon: fa-solid fa-rocket

Icons work in Markdown too, as HTML: <i class="fa-solid fa-star"></i> gives .

#Free icons

Without further setup, Clay loads the free icons of Font Awesome 6. They cover the solid, regular and brands styles, enough for most docs.

#Font Awesome kits

With a Font Awesome account, you can create a kit: a set of icons that can include Pro icons, newer versions or your own uploads. Set the kit’s ID in clay.yaml:

fontawesomeKit: "abc123def4"

The ID is the code in the kit’s embed URL, https://kit.fontawesome.com/abc123def4.js. With a kit, Clay loads the kit instead of the free icons.

Set the kit’s technology to Web Fonts in its settings on fontawesome.com. Kits set to SVG replace each icon in the page with a drawing, which interferes with how Clay updates pages while readers navigate.