Hugo Clarity

A technology-minded theme for Hugo based on VMware's open-source Clarity Design System featuring rich code support, dark/light mode, mobile support, and much more.

Live Demo

Clarity

Preview on Desktop

Light ModeDark Mode

Clarity Hugo Theme desktop light
Clarity Hugo Theme desktop dark

Preview on Mobile

Light ModeDark Mode

Clarity Hugo Theme mobile light
Clarity Hugo Theme mobile dark

Features

  • Blog with tagging and category options
  • Deeplinks
  • Native Image Lazy Loading
  • Customizable (see config)
  • Dark Mode (with UI controls for user preference setting)
  • Toggleable table of contents
  • Flexible image configuration
  • Logo alignment
  • Mobile support with configurable menu alignment
  • Syntax Highlighting

Rich code block functions including:

  1. Copy to clipboard
  2. Toggle line wrap (dynamic)
  3. Toggle line numbers
  4. Language label
  5. Toggle block expansion/contraction (dynamic)

To put it all in context, here is a preview showing all functionality.

code block functions

Github

chipzoller/hugo-clarity
A theme for Hugo based on VMware Clarity. Contribute to chipzoller/hugo-clarity development by creating an account on GitHub.