By default, a site using this theme has the default fonts, colors, and general look and feel. However, the default scheme cannot satisfy everyone, but don’t worry, you can easily override the theme defaults, such as palette colors, fonts, syntax highlighting.

Background Image

1# Use the same image on light and dark modes.
2backgroundImage = ['/images/bg.png']
3
4# Use different images on light and dark modes.
5backgroundImage = ['/images/bg-light.png', '/images/bg-dark.png']

Palettes

HBS provides a plenty of palettes: blue, blue-gray, brown, cyan, green, indigo, orange, pink, purple, red, teal, yellow.

Available Palettes

The palette picker on the setting panel is based on the palettes parameter.

1palettes = ["blue", "blue-gray", "indigo"]

You can also disable the palette picker by setting the palettes parameter to an empty array [].

Default Palette

1palette = "indigo"

You’ll need to clear the browser cache after modifying the default palette.

Override Palette Color

The palettes system is based on CSS variable, therefore, we can easily custom the color per palette.

1[data-palette=blue] {
2    --#{$variable-prefix}primary: darkblue;
3    --#{$variable-prefix}on-primary: #fff;
4}

After appending the style to assets/main/scss/_custom.scss, the color of blue palette will be changed to darkblue.

Fonts

Font Family

We don’t specify any font, so that system-ui will be used in most browsers.

You can use other web fonts easily, such as Google Fonts . Lets take the Roboto font as an example.

First of all, we import the font, and then override the body-font-family variable in assets/main/scss/_custom.scss:

1@import 'https://fonts.googleapis.com/css2?family=Roboto&display=swap';
2:root {
3    --#{$variable-prefix}body-font-family: 'Roboto', sans-serif;
4}

Syntax Highlighting

The theme requires the following markup parameters to be set to specific values.

  • lineNos: true
  • lineNumbersInTable: false
  • noClasses: false

See also Configure Highlight .

Style

1$ hugo gen chromastyles --style=solarized-dark > assets/main/scss/_highlight.scss

See also All Supported Styles .

Icons

 1// import { faClock } from '@fortawesome/free-solid-svg-icons';
 2// import { faAddressBook } from '@fortawesome/free-regular-svg-icons';
 3// import { faAmazon, faGoogle } from '@fortawesome/free-brands-svg-icons';
 4
 5const icons = [
 6    // faClock,
 7    // faAddressBook,
 8    // faAmazon, faGoogle,
 9];
10export default icons;