Look and Feel

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.

Favicons

HBS generates icons in multiple sizes base on the file assets/favicon.webp (higher priority) or assets/favicon.png. Just save your own favicon image as the same path to override the defaults.

You’ll need to override the mask icon assets/safari-pinned-tab.svg as well.

The static icons static/images/icons/icon-{size}.png have higher priority for backwards compatibility.

Custom Sizes

You’re able to change the sizes you want via params file.

 1[favicon]
 2[[favicon.sizes]]
 3  size = '16x16'
 4[[favicon.sizes]]
 5  size = '32x32'
 6[[favicon.sizes]]
 7  size = '150x150'
 8[[favicon.sizes]]
 9  rel = 'apple-touch-icon'
10  size = '180x180'
11[[favicon.sizes]]
12  size = '192x192'

1favicon:
2  sizes:
3  - size: 16x16
4  - size: 32x32
5  - size: 150x150
6  - rel: apple-touch-icon
7    size: 180x180
8  - size: 192x192

 1{
 2   "favicon": {
 3      "sizes": [
 4         {
 5            "size": "16x16"
 6         },
 7         {
 8            "size": "32x32"
 9         },
10         {
11            "size": "150x150"
12         },
13         {
14            "rel": "apple-touch-icon",
15            "size": "180x180"
16         },
17         {
18            "size": "192x192"
19         }
20      ]
21   }
22}

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

1$palette-blue: darkblue;

After modifying the SCSS variables on assets/main/scss/_variables.scss, the color of blue palette will be changed to darkblue. Please checkout the SCSS Variables for details.

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 url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
2:root {
3    --#{$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

HBS uses a custom FontAwesome v5 icon set that contains only the icons used by the theme to reduce the icon file size.

Add Icons

Considering the need for user-defined icons, HBS provides a custom icon feature, just create assets/icons/custom.js file in the site root and import the desired 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;

To make this work, you need to uncomment, that is, remove the prefix //.

Literally, @fortawesome/free-solid-svg-icons, @fortawesome/free-regular-svg-icons and @fortawesome/free-brands-svg-icons represent Solid, Regular and Brand icons respectively.

JS Variables

JS variables are named using camelCase, and their corresponding class names are lowercase and separated from each other by a horizontal line.

Usage

Depending on the type of icon, their class prefixs are ​​also different, the corresponding relationship is as follows:

Takes the previously imported icons as an example:

If the icon is not displayed properly, please check that the prefix is ​​correct.

Icon Color

You can either specify the color CSS utilities or the style attribute for setting the icon color.

When using it in configurations, front matter and so on, you should need to quote/escape the code, otherwise YAML/TOML/JSON parsing may fail. For example,

1---
2menu:
3  main:
4    params:
5      icon: '<i class="far fa-clock" style="color: blue"></i>'
6---