Hugo Paradigm Docs

Menu

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.

Note: If you make changes to a theme in the themes.json you will need to restart the hugo server ie stop it and re-run hugo server - This is a limitation of Hugo Pipes and resources.ExecuteAsTemplate

Changing the default theme

Open data/themes.json and change the themeId, try changing it to “steelyard”. The themeId must match the id of a theme defined in the themes array. You can create your own themes or edit the existing ones.

// data/themes.json
{
    "themeId": "zero",
    "themes": [
        {
            "id": "zero",
            ...
        },
        {
            "id": "steelyard",
            ...
        }
    ]
}

Editing theme colors

Try changing the colors.primary value to #3db751 - This will change the themes primary color to green.

// data/themes.json
{
    "themeId": "zero",
    "themes": [
        {
            "id": "zero",
            "name": "Zero",
            "colors": {
                "base": "#ffffff",
                "base_offset": "#f2f2f2",
                "base_text": "#202020",
                "base_text_offset": "#413f3f",
                "primary": "#2b3af7",
                "primary_offset": "#371fda",
                "primary_text": "#ffffff",
                "primary_text_offset": "#e8ffff"
            },
            ...
        }
    ]
}

Editing theme fonts

This theme uses Google Fonts. Visit the Google fonts website, select your fonts and copy the link. Paste the link into fonts.google_fonts

Note: Don’t copy the entire snippet, just the URL ie https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:wght@400;700&display=swap

// data/themes.json
{
    "themeId": "zero",
    "themes": [
        {
            "id": "zero",
            "name": "Zero",
            "colors": {
                ...
            },
            "google_fonts": "https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:wght@400;700&display=swap",
            "fonts": {
                "base": "Lato",
                "heading": "Source Sans Pro"
            }
        }
    ]
}

Then update the fonts.base or fonts.heading fields with the name of the new font.

Both fonts.base and fonts.heading are converted to CSS Variables which can then be accessed in any SCSS file. For example see how the Heading font is used in the header.scss.

// assets/scss/theme/header.scss
.header {
  font-family: var(--font-heading);
}

Adding extra fonts

Let’s say you want to add a third font - Notice in the code below we have added the Merriweather font to the google_fonts and created a new field called header which has been assigned the value “Merriweather”

// data/themes.json
{
    "themeId": "zero",
    "themes": [
        {
            "id": "zero",
            "name": "Zero",
            "colors": {
                ...
            },
            "google_fonts": "https://fonts.googleapis.com/css2?family=Lato&family=Merriweather&family=Source+Sans+Pro:wght@400;700&display=swap",
            "fonts": {
                "base": "Lato",
                "heading": "Source Sans Pro",
                "header": "Merriweather"
            }
        }
    ]
}

Now you can access this new font in the SCSS files

// assets/scss/theme/header.scss
.header {
  font-family: var(--font-header);
}

Long Live Static

Designed and built by Rob Austin @ausrobdev
in Brisbane, Australia. We stand on the shoulders of giants: Hugo | Jekyll

Themes

Support

Company