Update colors in Academic Hugo theme

Here I go again with this blogging thing…but I noticed the Hugo theme I was using previously has not been updated in some time (…much like my blog…don’t judge). I will switch to the Academic theme but I prefer different colors, so I’ll change them.

If you do not care to read (or about) all the words and explanations, feel free to skip to the SHORT VERSION

BACKGROUND

This is probably a pretty silly post because (a) what you need to do will greatly depend on your own site and (b) the Academic documentation is actually pretty good. But I thought I’d add this post as notes to myself and as an opportunity to explain the colors I’ve chosen.

The reasons are pretty simple actually:

1. I have been an NCSU fan for my entire life (and I also attended college there). Their colors are red, white, and black. Using strictly those colors might be a little obnoxious and hard on the eyes though.

2. I am a pretty huge fanboi of open source technology and especially Red Hat, so I’ve also used colors from their palette (not to mention they probably had someone who actually knows what looks good determine theirs)

CHALLENGE

As far as I can tell, colors are really only used for links and can be specified in various other features of an Academic page. I generically use a “hero” page, so I’ll update the colors in that too.

The biggest challenge for me is to make these modifications without updating the theme. In past themes, I dug into the CSS and found where the colors were specified and changed them there. That resulted in having a theme that always differed (although only slightly) from the official one and I could never get things right once I’d modified the theme.

I still have a lot to learn about git and submodules, but for now, my preference is to leave the theme alone.

SOLUTION

01 - Custom color theme

Lucky for me, the Academic theme really makes this pretty easy. I simply chose an existing color theme that was sort of close to what I wanted, copied it to a location outside of the theme directory structure and modified it with the colors I wanted.

# from the root of my site repository
$ mkdir -vp data/themes
$ cp -v themes/hugo-theme-academic/data/themes/minimal.toml \
      data/themes/red-minimal.toml

As you can see, I chose the minimal (default) color theme to base my custom one off of. It was close, but I hate all the blue of it.

In the new data/themes/red-minimal.toml I found that all I needed to update were the “name,” “primary,” and “menu_text_active” settings:

# from the root of my site repository
$ cat data/themes/red-minimal.toml
# Theme metadata
name = "Red Minimal"

# Is theme light or dark?
light = true

# Primary
primary = "#BE0000"

# Menu
menu_primary = "#fff"
menu_text = "#34495e"
menu_text_active = "#BE0000"
menu_title = "#2b2b2b"

# Home sections
home_section_odd = "rgb(255, 255, 255)"
home_section_even = "rgb(247, 247, 247)"

And after that, all I needed to do was update my params.toml file to use my new custom color theme by specifying it by filename (not the “name” text I used within the red-minimal.toml file.

# from the root of my site repository
$ egrep "^theme" config/_default/params.toml
theme = "red-minimal"

_{These changes were captured in commit 8106dcc}

02 - Hero “banner” color

By default, the hero banner was blue and I don’t like blue. I had already modified the content/home/hero.md file so I knew I could specify the colors (as well as a lot of other things) in there. I like the gradient effect so I chose two colors from the Red Hat color scheme:

# from the root of my site repository
$ grep gradient_ content/home/hero.md
  gradient_start = "#BE0000"
  gradient_end = "#5F0000"

_{This change was captured in commit 53809cb}

SIDE NOTES

• I’m not convinced that I like these colors, but I’ll stick with them for now and, thanks to this page, I’ll know how to change them if I decide to in the future

WHAT I LEARNED

• so far, I have not modified the theme (to my knowledge) and so I should be able to pull down any updates made to the official theme repository…fingers crossed

REFERENCE

• Hugo static site generator
• Academic theme github repository
• Academic theme custom color theme documentation
• NCSU colors (which I’m not using, subsequently…)
• Red Hat color standards

SHORT VERSION

To avoid tl;dr enjoy this instead:

#### 01 - Custom color theme
# from the root of my site repository
$ mkdir -vp data/themes
$ cp -v themes/hugo-theme-academic/data/themes/minimal.toml \
      data/themes/red-minimal.toml
# modify the colors in data/themes/red-minimal.toml
# update config/_default/params.toml to use new color theme
#### 02 - Hero "banner" color
# I'm using gradient, simply change gradient colors in content/home/hero.md