Theme Colors and Fonts
Hugo Lever 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]
[params.colors]
[params.colors.light]
base_bg_1 = "#fffef5"
base_bg_2 = "#f9f8ef"
base_bg_3 = "#e7e5d4"
base_text_1 = "#2f2e2a"
base_text_2 = "#535247"
base_text_3 = "#535247"
primary_bg_1 = "#191917"
primary_bg_2 = "#171618"
primary_text_1 = "#fffef5"
primary_text_2 = "#f9f8ef"
logo_text = "#202020"
[params.colors.dark]
base_bg_1 = "#0b0b0b"
base_bg_2 = "#242424"
base_bg_3 = "#929292"
base_text_1 = "#ffffff"
base_text_2 = "#d7d7d7"
base_text_3 = "#a8a4a4"
primary_bg_1 = "#191917"
primary_bg_2 = "#171618"
primary_text_1 = "#fffef5"
primary_text_2 = "#f9f8ef"
logo_text = "#ffffff"
params.colors.light colors are for light mode and params.colors.dark are used in dark mode.
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 update the other fields with the name of the new font.
# config.toml
[params]
[params.fonts]
google_fonts = "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;900&family=Space+Mono&display=swap"
heading = "Inter"
base = "Inter"
monospace = "Space Mono"
logo = "Inter"
