Hugo Shard uses variables for typical global theme settings, such as colors and fonts. It’s easy to change the theme to your brand color and typography.
You can edit these variables in the config.toml or you can edit the SCSS variables directly in assets/scss/style.scss
You can edit the main theme colors in the config.toml
# config.toml
[params]
[params.theme]
# Theme colors
primary_color = "#1c3ed3"
secondary_color = "#6d1cd3"
grey_color = "#f4f5fb"
These variables are automatically used by style.scss
// style.scss
$primary: {{ .Site.Params.theme.primary_color | default "#2b3af7" }};
$secondary: {{ .Site.Params.theme.secondary_color | default "#defffa" }};
$grey: {{ .Site.Params.theme.grey_color | default "#f4f5fb" }};
This theme uses Google Fonts. You can configure different fonts for headings and base text.
# config.toml
[params]
[params.theme]
# Theme fonts
font_base = "Lato"
font_heading = "Roboto"
Designed and built by Rob Austin @ausrobdev in Brisbane, Australia. We stand on the shoulders of giants: Hugo | Jekyll