The Trigo Theme defines its own defaults and offers options to further customize the theme. Cascading Style Sheets (CSS) Variables are used throughout the theme and can be easily overridden.

Font Family

The font family of the content can be customized using:

:root {
  --sans: Arial, Verdana, BlinkMacSystemFont, Helvetica, 'Helvetica Neue', 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif;
  --mono: "Lucida Console", Monaco, "Consolas", monospace;
}

Text Size

The size of the text can be customized using:

:root {
/* Variables for text sizes: small (terms, footnotes), medium (normal text), large (h3), extra large (h2), extra extra large (h1) */
  --s: 0.75rem;
  --m: 1rem;
  --l: 1.5rem;
  --xl: 2.25rem;
  --xxl: 3.5rem;
}

Primary Colors

The primary colors can be customized using:

:root {
  --primary-hue: 100deg;
  --primary-saturation: 90%;
  --primary-lightness: 50%;
}

Element Sizes

The size of the main page elements such as content blocks, hero, navbar and other can be customized using:

:root {
  --content-width: 90ch;
}

Syntax Highlighting

List of available syntax highlighting themes are available at Chroma Styles Gallery. The stylesheet can be generated using the command:

hugo gen chromastyles --style=github

To override the default syntax highlighting theme, we can add the generated styles to the custom CSS file.

Custom Layouts

The layouts of the theme can be overridden by creating a file with the same name in the layouts directory of your site. For example, to override the single.html layout for docs, create a file layouts/docs/single.html in your site.

For further information, refer to the Hugo Templates.

Further Customization

Didn’t find what you were looking for? Feel free to open a discussion or make a contribution to the theme!

List of Site and Front Matter variables used by Trigo Theme

Site Variables under Params

Site Variables

label

cover

schema

Page Variables