Customizing Hextra

Hextra offers some default customization options in the hugo.yaml config file to configure the theme. This page describes the available options and how to customize the theme further.

Custom CSS

To add custom CSS, we need to create a file assets/css/custom.css in our site. Hextra will automatically load this file.

Font Family

The font family of the content can be customized using:

.content {
  font-family: "Times New Roman", Times, serif;
}

Inline Code Element

The color of text mixed with other text can customized with:

.content code:not(.code-block code) {
  color: #c97c2e;
}

Primary Color

The primary color of the theme can be customized by setting the --primary-hue, --primary-saturation and --primary-lightness variables:

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

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 Scripts

You may add custom scripts to the end of the head for every page by adding the following file:

layouts/partials/custom/head-end.html

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!