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.

Palettes

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

Let’s illustrate with an example.

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

After appending the style to assets/css/custom.css, 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 easilly, such as Google Fonts . Lets take the Roboto font as an exmaple.

First of all, we import the font by customCSS:

1customCSS = [
2  "https://fonts.googleapis.com/css2?family=Roboto&display=swap"
3]

And then override the --hbs-body-font-family variable in assets/css/custom.css:

1:root {
2  --hbs-body-font-family: 'Roboto', sans-serif;
3}

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/css/highlight.css

See also All Supported Styles .

Icons

We’re using a custom Font Awesome icon set, in order to reduce the file size of icons. Because of this, you are free to choose other icons.

Font Awesome

Custom Build

This section contains front-end technologies, such as JavaScript and npm.

We provided a file called assets/js/icons.js for customizing icons, therefore, you can add icons as needed. We already set up e build environment in the example site for you.

1. Install Dependencies

1$ npm install

2. Add icons into src/icons/index.js:

1import { faGlobe, faClock } from '@fortawesome/free-solid-svg-icons';
2
3library.add(faGlobe, faClock);

3. Rebuild assets/js/icons.js:

1$ npm run build

It’s a recommended way to add icons if you’re familiar to front-end development.

CustomJS

Since the theme using JS+SVG framework to replace icons to SVG, so the customCSS won’t work, you need to use customJS instead.

1customJS = [
2  "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/js/solid.min.js" # Import solid icons.
3  #"https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/js/regular.min.js" # Import regular icons.
4  #"https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/js/brands.min.js" # Import brand icons.
5  #"https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/js/all.min.js" # Import the full icon set.
6]

Others

The other icons can be imported by customCSS, customJS or Hooks .

• Iconify
• Bootstrap Icons
• Material Design Icons