1. Heading and icon colors


In this short example I demonstrate how to customize the colors of a website generated Hugo Academic theme. In the “config.toml” file in the root directory there are 5 color themes offered for your website: default, ocean, forest, coffee, or dark. For instance, here’s a snippet of my website with with forest theme:

The themes are controlled by five .toml files located in themes/hugo-academic/data/themes. To create a custom theme, create a new .toml file, name it (e.g. “new_theme.toml”), then copy and paste in the new file the contents of “default.toml”, and set color_theme in line 35 of the “config.toml” located in the home directory to "new_theme".
Go back to the “new_theme.toml” file and try changing HEX color codes in “# Primary”, “# Menu”, and “# Home sections”. For instance, changing HEX color code of "primary" in “# Primary” section to red (HEX code #e21212) results in change in color of the contact icons, project tabs, and links:

Changing "primary_light" and "primary_dark" colors in “# Primary” section will change the base or highlight colors of the tabs (e.g. in “Projects” section), respectively.

Changing HEX color code of "menu_primary" in “# Menu” section to red changes background color of the main menu:

Other options in the “# Menu” section are as follows:

  • "menu_text" controls the color of main menu text in the top of the webpage;
  • "menu_text_active" controls the color of main menu text in the top of the webpage when it’s highlighted by the cursor or when the user navigates to the corresponding section of the webpage;
  • "menu_title"- not clear on this one (nothing changed when the color was changed).

Changing HEX color code of "home_section_odd" in “# Home section” section to red changes background color of the odd sections of the website (the numer of sections is equal to the menu sections in top right corner of the website:

2. Text color

To change the text color, navigate to themes/hugo-academic/layouts/partials/css and open the file “academic.css” (opening it with Notepad ++ will improve file’s readability):

In line 26, set the color to red (#e21212). This will change the color of main text:

In line 76, set the color to red (#e21212). This will change the color of the heading text:

In addition:

  • line 344 controls the color of the name;
  • line 351 controls the color of the title.

Lastly, a useful resource for colors and their names is Google color picker, and the source code for live version my website with the customized color themes is located at my github account.