Customizing

Colors

The full color system, exposed as 22 Hugo params.

4 min

Every color the theme uses is a CSS custom property fed by a Hugo param. Override any of them in your site’s hugo.toml to rebrand instantly.

The signature gradient

The theme’s defining motif is the official Splunk brand gradient — Magenta 50 → Orange 50 with stops at 10% / 90%. It appears on the hero <em>, step circles, the chapter weight number, the progress bar, the pager hover, and a dozen other places.

toml 
[params]
  colorAccent     = "#FF007F"   # Magenta 50 · Pantone 213 C · decorative (gradients, large display, borders, icons)
  colorAccent2    = "#FF9000"   # Orange 50  · Pantone 151 C · gradient end
  colorAccent3    = "#FFAB0F"   # supplementary amber (warm callouts only)
  colorAccentDark = "#D4006B"   # darker magenta for hover/active

  # Body-text accent — WCAG AA contrast. Use these for inline link colour,
  # active sidebar/breadcrumb states, and any place magenta meets prose.
  colorAccentText     = "#BD0D5F"   # Magenta 60 — ~5.4:1 on white
  colorAccentTextDark = "#FF7DBA"   # Magenta 30 — ~8:1 on Splunk navy

Why two accents

Magenta 50 (#FF007F) is the brand colour but only hits ~3.6:1 on white — fine for large text, icons, gradients, and borders, but fails AA for body text. The theme splits accent usage:

UseToken
Hero gradient, step circles, chapter weight number, progress bar--color-accent
Icons, decorative borders, focus rings, shadows--color-accent
Inline link text, active sidebar/TOC entry, inline-code colour--color-accent-text
Body badges (accent variant)--color-accent-text

If you rebrand to a single accent that already hits AA, set colorAccentText to the same value as colorAccent.

The gradient is computed from the two brand stops:

css 
linear-gradient(95deg, var(--color-accent) 10%, var(--color-accent-2) 90%)

The 10% / 90% offsets match the official brand spec — they keep the pure brand colors at the edges and let the natural CSS interpolation form a coral/red middle.

To rebrand to a single accent (no gradient), set both colorAccent and colorAccent2 to the same value.

Light mode tokens

TokenDefaultUsed for
colorInk#0C1724Body text
colorInkMuted#585B61Muted text, captions (AA-safe; bumped from the bare #4B4D52 to hit ~4.6:1 on white)
colorPaper#FFFFFFPage background
colorSurface#F4F6FACallout fills, card surfaces (cool gray to harmonize with the dark-mode navy palette)
colorSurfaceAlt#E9EDF2Inline code chip background
colorBorder#E1E5ECHairlines
colorBorderStrong#C7CDD8Strong borders, code-block borders

Dark mode tokens

Every light token has a …Dark counterpart that takes effect when data-theme="dark":

TokenDefault
colorInkDark#F4F1EA
colorInkMutedDark#9CA3AF
colorPaperDark#0C1724
colorSurfaceDark#141E2F
colorSurfaceAltDark#1B2740
colorBorderDark#1F2C44
colorBorderStrongDark#2A3A56

Code-block surfaces

Fenced code blocks render inside a chrome with a header bar (language label or file=… attribute, plus the Copy button) over the highlighted body. Each surface is its own param so you can match the rest of your design.

toml 
[params]
  codeBg           = "#F5F5F5"   # body background, light
  codeHeaderBg     = "#F2F2F2"   # header bar background, light
  codeBgDark       = "#0A1322"   # body background, dark
  codeHeaderBgDark = "#131E33"   # header bar background, dark

The defaults sit one step off the page paper / surface tokens so a code block reads as “embedded panel” rather than blending into the page. If you want them flatter, set them to your colorSurface and colorSurfaceAlt values; for sharper contrast, push them further from paper.

Italic in display headings becomes the brand gradient

Markdown emphasis inside the hero title, the browse-page h1, and the See-all category names renders as the pink→orange gradient instead of plain italic. So a front-matter title like:

toml 
hero_title = "Observability *Workshops*."

…outputs Observability in normal weight and Workshops in lighter italic gradient. The pattern is reserved for display headings (decorative, large-type) — workshop body ## / ### headings still treat *italic* as plain emphasis so authors can use it for file names, technical terms, etc., without the brand colour overriding them.

Templates that want this opt in by piping the title through markdownify. The bundled hero.html, browse/list.html, and browse/row.html already do.

Worked example: rebrand to a teal/charcoal palette

toml 
[params]
  colorAccent     = "#0EA5E9"
  colorAccent2    = "#06B6D4"
  colorAccent3    = "#A7F3D0"
  colorAccentDark = "#0284C7"

  colorInk          = "#1F2937"
  colorInkMuted     = "#6B7280"
  colorPaper        = "#FAFAF9"
  colorSurface      = "#F4F4F5"
  colorSurfaceAlt   = "#E4E4E7"

  colorPaperDark        = "#0F172A"
  colorSurfaceDark      = "#1E293B"
  colorSurfaceAltDark   = "#334155"

That’s the full rebrand — no SCSS recompile, no theme fork. The CSS custom properties update at page load.

Use a color tool

Run your accent through oklch.com or Tailwind’s color palette to pick stops with even perceptual lightness. The gradient looks much better when stops are tonally balanced.

Where these are wired

The flow is:

  1. Param value lives in hugo.toml (this is what you edit).
  2. layouts/_partials/chrome/theme-vars.html reads the param and emits a <style> block with --color-… custom properties.
  3. Every CSS file in assets/css/ references var(--color-…).
  4. Dark mode flips the values via [data-theme="dark"] selectors.

If you want to add a new color, add the param + a default in chrome/theme-vars.html, then reference var(--color-mything) from CSS.

Last Modified ·