Adjust the aesthetic

Switch up the primary color, change the font. Make it yours!

The config.toml file at the root of your project provides a few knobs for changing up the look and feel of the site, including the colors, the font, and the syntax highlighting theme.

Colors

The params.colors block in has a primary and a secondary field. You can use those to provide hex codes for your color scheme.

Fonts

The params.fonts variable lets you register multiple fonts. Here is the default:

[[params.fonts]]
name = "Alata"
sizes = [400]
type = "sans_serif"

[[params.fonts]]
name = "Roboto Mono"
sizes = [300, 500, 600, 700]
type = "monospace"

Available fonts

You can change the sans-serif and monospace fonts to any that are currently available through Google Fonts.

Syntax highlighting theme

The syntax highlighting theme is set under the markup.highlight block. Here is the default:

[markup.highlight]
style = "fruity"

Available themes

You can see a listing of all available syntax highlighting themes, plus examples, in the Chroma Style Gallery.

Last updated by lucperkins on December 24, 2019 at 02:28 -0500