Hugo
Customization
Customize colors and typography by editing variables.
This guide explains how you can change the look and feel of your project, like its colors and fonts.
Customizing colors
You can change the main colors used throughout the project from src/styles/variables.css.
- Open
variables.css - Find the
/* ==== COLORS ==== */section - Update the
--color-*variables (for example--color-primary-500)
Example:
/* Example color variables in variables.css */
@theme {
/* =============== COLORS =============== */
--color-primary-500: #864ffe; /* <-- Main primary color */
--color-primary-600: #7c31f6; /* <-- Darker primary shade */
--color-primary-400: #a585ff; /* <-- Lighter primary shade */
--color-secondary: #1a1a1c; /* <-- Secondary color */
--color-accent: #fcfcfc; /* <-- Accent color */
--color-background-1: #fcfcfd; /* <-- Main background */
--color-background-2: #f9fafb; /* <-- Secondary background */
}
Key variables to customize:
--color-primary-500--color-secondary--color-accent--color-background-1…--color-background-11--color-stroke-1…--color-stroke-9
Customizing font size
Look for the /* =============== TYPOGRAPHY =============== */ section in src/styles/variables.css and adjust sizes/line-heights.
@theme {
/* =============== TYPOGRAPHY =============== */
--text-heading-1: 4.25rem;
--text-heading-1--line-height: 110%;
--text-heading-2: 3.25rem;
--text-heading-2--line-height: 120%;
--text-heading-3: 2.5rem;
--text-heading-3--line-height: 120%;
--text-heading-4: 2rem;
--text-heading-4--line-height: 130%;
--text-heading-5: 1.5rem;
--text-heading-5--line-height: 140%;
--text-heading-6: 1.25rem;
--text-heading-6--line-height: 140%;
--text-tagline-1: 1rem;
--text-tagline-1--line-height: 150%;
--text-tagline-2: 0.875rem;
--text-tagline-2--line-height: 150%;
--text-tagline-3: 0.75rem;
--text-tagline-3--line-height: 150%;
}