Hugo Advance Docs

Theme Colors and Fonts

Hugo Advance 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

Editing theme colors

You can edit the main theme colors in the config.toml

# config.toml

[params.colors]
  [params.colors.light]
    base = "#ffffff"
    base_offset = "#f2f2f2"
    base_text = "#202020"
    base_text_offset = "#625c5c"
    alt = "#f4f5fb"
    alt_offset = "#CCCCCC"
    alt_text = "#202020"
    alt_text_offset = "#625c5c"
    primary = "#2b3af7"
    primary_offset = "#702bf7"
    primary_text = "#ffffff"
    primary_text_offset = "#79bcff"
  [params.colors.dark]
    base = "#121212"
    base_offset = "#1e1e1e"
    base_text = "#ffffff"
    base_text_offset = "#d7d7d7"
    alt = "#1e1e1e"
    alt_offset = "#2f2f2f"
    alt_text = "#fafafa"
    alt_text_offset = "#a8a4a4"
    primary = "#2b5df7"
    primary_offset = "#a62bf7"
    primary_text = "#eeebfc"
    primary_text_offset = "#a7a7a7"

params.colors.light colors are for light mode and params.colors.dark are used in dark mode.

The theme uses 3 main color palettes, base, alt and primary - Typically the base is the websites background and is normally white or black. alt is usually a grey color and is used for the background of cards and sections. primary is used for buttons and highlights, it’s often your primary brand color.

Editing theme fonts

This theme uses Google Fonts. If you want to use different fonts, visit the Google fonts website, select your fonts, then copy and paste the <link> code snippet into the google_fonts field in the config.toml. Below this field update the heading, base and monospace fields with the name of the new font.

# config.toml

[params]
  [params.fonts]
    google_fonts = "https://fonts.googleapis.com/css2?family=Fira+Mono&family=Lato:wght@300;400;700&family=Source+Sans+Pro&display=swap"
    heading = "Lato"
    base = "Source Sans Pro"
    monospace = "Fira Mono"