Theming and style on pydata-hugo-theme

Branding

Mon, 01 Jan 0001 00:00:00 +0000

Logo

[params.logo]
 text = 'My Site'
 link = '/'
 # image_light = 'images/logo-light.png'
 # image_dark = 'images/logo-dark.png'
 alt_text = 'My Site — Home'

With no image_light set, text renders as a plain text brand link (falls back to site.Title if text is unset).
With image_light set, the image is used instead; image_dark swaps in for dark mode (falls back to image_light if image_dark is unset). Text still renders alongside the image if text is explicitly set.
alt_text sets the image’s alt attribute (falls back to "<site title> - Home").

This documentation site intentionally only sets logo.text and ships no sample logo image at all — this is an unofficial, unaffiliated port, so it deliberately avoids using (or even hotlinking) the original PyData Sphinx Theme’s branding.

Fonts

Mon, 01 Jan 0001 00:00:00 +0000

FontAwesome and Bootstrap’s JS are pulled in as build-time npm dependencies and mounted into the asset pipeline via [[module.mounts]] in this module’s own hugo.toml — see Asset pipeline for how the mounting/fingerprinting works.

Overriding the bundled FontAwesome version

The pinned version lives in this module’s own package.json. A consuming site can override it without forking the theme by mounting its own copy at the same target path — Hugo resolves mounts from the site’s own node_modules first:

Light / dark mode

Mon, 01 Jan 0001 00:00:00 +0000

[params]
 default_mode = 'auto' # 'light' | 'dark' | 'auto'

auto follows the visitor’s OS/browser color-scheme preference. The mode is read/written to localStorage client-side, so a visitor’s explicit choice persists across pages and future visits.

The theme switcher

theme-switcher.html renders a dropdown (light/dark/system) — it’s in navbar_end by default. Remove it from your navbar slots to hide the control entirely (visitors then always get whatever default_mode resolves to):

Styling

Mon, 01 Jan 0001 00:00:00 +0000

CSS custom properties

The vendored static/styles/pydata-sphinx-theme.css exposes the same --pst-* CSS custom properties as the upstream theme (colors, fonts, spacing, sidebar widths, etc.). Override them in your own stylesheet:

:root {
 --pst-color-primary: #123456;
}

Adding your own stylesheet

[params]
 extra_css = ['/css/custom.css']

extra_css is this theme’s equivalent of Sphinx’s html_css_files — a list of stylesheet paths or full URLs, injected after the theme’s own CSS (so your rules can override theme defaults without !important).