Colours

Ananke styles colours and typography with Tachyons utility classes. You choose a class name (for example bg-blue or near-black) and the theme applies it. This page lists the class-based settings.

How the theme uses classes #

Each setting below takes a Tachyons class as its value. Background colours use the bg- prefix (for example bg-navy); text colours use the colour name directly (for example near-white). Browse the available values in the Tachyons skins reference.

Background colour #

background_color_class sets the colour used for the header when there is no featured image, and for the footer. The default is bg-black:

# config/_default/params.toml

[params]
background_color_class = "bg-blue"

See Header and Hero → fallback.

Body and font classes #

body_classes sets the classes on the <body> element — typically a typeface and a page background. The default is a near-white background with the Avenir typeface:

# config/_default/params.toml

[params]
body_classes = "avenir bg-near-white"

This produces <body class="avenir bg-near-white">. Pick a typeface from the Tachyons font-family list and a background from the skins list.

Content text colour #

text_color sets the colour of the main content text. Set it globally or per page (front matter wins over the site value). The default is mid-gray:

# config/_default/params.toml

[params]
text_color = "near-black"

The value must be a valid Tachyons colour class.

Post content typeface #

body_classes does not change the font used inside post content. Use post_content_classes for that (default serif):

# config/_default/params.toml

[params]
post_content_classes = "lato"

Header and hero classes #

The hero/header has its own class settings — featured_image_class, cover_dimming_class, and header_section_class. These are documented with examples in Hero Section.

Accessibility and contrast #

[!WARNING] Always check colour contrast. Light text on a light background (or dark on dark) fails accessibility guidelines and is hard to read. When you change background_color_class, body_classes, or text_color, verify the combination meets at least WCAG AA contrast (4.5:1 for body text).

Safe starting points keep strong contrast, for example dark text on a light background (text_color = "near-black" with body_classes = "... bg-near-white") or light text on a dark header (background_color_class = "bg-black").