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.png.

Background Image#

# Use the same image on light and dark modes.
backgroundImage = ['/images/bg.png']

# Use different images on light and dark modes.
backgroundImage = ['/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.

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

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

Default Palette#

palette = "indigo"

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

Override Palette Color#

$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:

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

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#

$ 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.

// import { faClock } from '@fortawesome/free-solid-svg-icons';
// import { faAddressBook } from '@fortawesome/free-regular-svg-icons';
// import { faAmazon, faGoogle } from '@fortawesome/free-brands-svg-icons';

const icons = [
    // faClock,
    // faAddressBook,
    // faAmazon, faGoogle,
];
export 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.