Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/gurusabarish/hugo-profile/llms.txt

Use this file to discover all available pages before exploring further.

Hugo Profile ships with full color customization and a built-in light/dark/auto theme toggle in the navbar. You can define distinct palettes for both light and dark mode through the params.color block in hugo.yaml — no CSS editing required. All color values are written directly into CSS custom properties at build time, which means every component in the theme automatically inherits your choices.

​
Theme Toggle

The theme toggle button (sun/moon icon) is displayed in the navbar by default. Two params control it:
​
params.theme.disableThemeToggle
boolean
default:"false"
Set to true to completely remove the light/dark toggle button from the navbar. Users will be locked to whichever mode is selected via defaultTheme.
​
params.theme.defaultTheme
string
The color mode applied on first visit (before the user makes a choice). Accepted values:
  • "light" — always start in light mode
  • "dark" — always start in dark mode
  • (omit the key) — auto mode: reads the visitor’s OS-level prefers-color-scheme preference and applies it automatically
The user’s manual choice is stored in localStorage under the key pref-theme and respected on subsequent visits.
params:
  theme:
    disableThemeToggle: false
    defaultTheme: "light" # "light" | "dark" | omit for auto

​
Color Variables

All color values live under params.color. Light mode colors are set directly on params.color; dark mode overrides go under params.color.darkmode. Both sets use identical field names.
Hex color values that start with # must be wrapped in YAML quotation marks, e.g. "#007bff". Without quotes the # character begins a YAML comment and the value is silently dropped.

​
Light Mode

​
params.color.textColor
string
default:"#343a40"
Primary body text color.
​
params.color.secondaryTextColor
string
default:"#6c757d"
Muted / secondary text color used for subtitles, section headings, card metadata, and similar de-emphasized copy.
​
params.color.textLinkColor
string
default:"#007bff"
Color of hyperlinks in body content. Defaults to primaryColor when not explicitly set.
​
params.color.backgroundColor
string
default:"#eaedf0"
Main page background color applied to <html> and most page-level surfaces.
​
params.color.secondaryBackgroundColor
string
default:"#64ffda1a"
Accent background used for cards, experience containers, and other elevated surfaces. The default is a semi-transparent teal tint.
​
params.color.primaryColor
string
default:"#007bff"
Brand accent color — used for buttons, borders, active tab indicators, list markers, and hero headings.
​
params.color.secondaryColor
string
default:"#f8f9fa"
Secondary surface color for cards, hero image borders, and other contained elements.

​
Dark Mode

All fields under params.color.darkmode mirror the light mode fields exactly. They are applied whenever the dark class is present on <html> or <body> (the theme toggle and the default-theme scripts add the class to both elements simultaneously).
​
params.color.darkmode.textColor
string
default:"#e4e6eb"
Primary text color in dark mode.
​
params.color.darkmode.secondaryTextColor
string
default:"#b0b3b8"
Secondary / muted text color in dark mode.
​
params.color.darkmode.textLinkColor
string
default:"#ffffff"
Hyperlink color in dark mode. Defaults to darkmode.primaryColor when not explicitly set.
​
params.color.darkmode.backgroundColor
string
default:"#18191a"
Main background color in dark mode.
​
params.color.darkmode.secondaryBackgroundColor
string
default:"#212529"
Secondary surface / card background color in dark mode.
​
params.color.darkmode.primaryColor
string
default:"#ffffff"
Brand accent color in dark mode.
​
params.color.darkmode.secondaryColor
string
default:"#212529"
Secondary surface color in dark mode.

​
Full params.color Example

params:
  color:
    # Light mode
    textColor: "#343a40"
    secondaryTextColor: "#6c757d"
    textLinkColor: "#007bff"
    backgroundColor: "#eaedf0"
    secondaryBackgroundColor: "#64ffda1a"
    primaryColor: "#007bff"
    secondaryColor: "#f8f9fa"

    darkmode:
      textColor: "#e4e6eb"
      secondaryTextColor: "#b0b3b8"
      textLinkColor: "#ffffff"
      backgroundColor: "#18191a"
      secondaryBackgroundColor: "#212529"
      primaryColor: "#ffffff"
      secondaryColor: "#212529"

​
CSS Variable System

At build time Hugo Profile injects all color values as CSS custom properties on :root. The full set of variables is: 
:root {
  --text-color: ...;
  --text-secondary-color: ...;
  --text-link-color: ...;
  --background-color: ...;
  --secondary-background-color: ...;
  --primary-color: ...;
  --secondary-color: ...;

  /* dark mode variants — swapped in by the .dark class */
  --text-color-dark: ...;
  --text-secondary-color-dark: ...;
  --text-link-color-dark: ...;
  --background-color-dark: ...;
  --secondary-background-color-dark: ...;
  --primary-color-dark: ...;
  --secondary-color-dark: ...;
}
Advanced users can override individual properties by adding a <style> block via params.customScripts or by placing a custom CSS file in static/css/.
If you only set light mode colors and omit the darkmode block entirely, Hugo Profile falls back to its built-in dark mode defaults (#18191a background, #e4e6eb text, etc.). You don’t need to define both palettes to get a working dark mode.

Build docs developers (and LLMs) love

Get started for freeTalk to us