Themeing

Hugo Paradigm uses JSON data to store theme variables and make them easy to modify. It converts them to css variables. It’s easy to change the colors and fonts at a global level.

Selecting a preset theme

Open data/layout.yaml and change the theme id. Try changing it to “steelyard”

# data/layout.yaml

theme: "default"

Open data/themes.json - It contains all the available preset themes. You will see each object has an id - this is the theme id you can use in the data/layout.yaml

Create new themes

Open data/themes.json You can easily copy and paste an existing theme object, give it a new id and name and then edit the colors and font values.

Editing theme colors

Edit the theme colors in the data/themes.json

# data/themes.json
{
    "id": "default",
    "name": "Default",
    "colors": {
        "base": "#fff",
        "baseOffset": "#f2f2f2",
        "baseOffset2": "#ececec",
        "baseText": "#202020",
        "baseTextOffset": "#373434",
        "primary": "#2b3af7",
        "primaryOffset": "#4224d9",
        "primaryText": "#ffffff"
    }
}

Editing theme fonts

Edit the fonts in the data/themes.json

# data/themes.json
{
    "id": "default",
    "name": "Default",
    "colors": {
        ...
    },
    "fonts": {
        "base": "Lato",
        "heading": "Source Sans Pro"
    }
}

Goole Fonts

This theme uses Google Fonts. It automatically imports the fonts from Google fonts.

As long as you enter the font names correctly in the theme configuration above the fonts will be imported in the head of layouts/_default/baseof.html