Hugo PolyRhythmic | Live Demo

Fast | Responsive | Material Design 3

❗This theme is still very much in development. Please use with caution.

PolyRhythmic is on: Hugo Themes | GitHub | Product Hunt

Key Features

• Active menu location indicator
• Archive support
• Asset management: pipeline, fingerprint, bundle, and minify Hugo assets
• Back-to-top button
• Backlinks and related page suggestions
• Code copy button
• Contact template: quick contact form
• Cover images for individual pages
• Custom tabbed navigation
• Debug mode for development
• GitHub repository buttons for pages
• Home page navigation buttons
• Keyboard shortcuts and access keys
• Light/dark theme toggle
• Logseq graphs as a Single Page Application (SPA)
• Multiple author support
• “Now” page table: list of recently updated pages
• Page navigation cards
• Random page button
• Responsive sticky table of contents
• Search functionality with Fuse.js
• SEO optimization
• Sitemap template: table with Hugo-specific columns
• Social media share buttons
• Taxonomies and sections organization
• Theme customization: control color, contrast, shape, typography, and more

Key Differences from Material 3

• Adjustable content text width, font size, and line height
• Control over brand, plain, and mono typefaces
• Direction control for tertiary color
• Mono typeface addition
• No use of scripting for state layers
• Option to dim images in dark mode
• Shape scale control

Install

1. Install Hugo: Hugo Docs’s - Quick Start
2. Create a new Hugo site

# replace YourSite with your website's name
hugo new site YourSite --format yaml

3. Add PolyRhythmic to your YourSite/themes/ directory

• Option 1: Clone git repository:

  git clone https://github.com/wonyoung-jang/hugo-PolyRhythmic themes/PolyRhythmic --depth=1
  

• Option 2: Download and unzip:
  • Download the PolyRhythmic source and extract the zip in your YourSite/themes/PolyRhythmic directory
• Option 3: Use Hugo Modules
  • Install Go
  • Intialize your own hugo module:

    hugo mod init YOUR_GIT_REPO
    

  • Add PolyRhythmic in your config.yaml or module.yaml

    # config.yaml
    module:
        imports:
        - path: github.com/wonyoung-jang/hugo-PolyRhythmic
    
    # module.yaml
    imports:
        - path: github.com/wonyoung-jang/hugo-PolyRhythmic
    

4. In your config.yaml add:

theme: ["PolyRhythmic"]

Support

• Star, share, and use this repository on GitHub
• If you would like to sponsor me, you can through Github Sponsors
• You may also donate on Ko-Fi

Thanks

• Fuse.js
• Material Symbols
• Material Design 3
• Google Fonts

See also

• Paige
• TailBliss
• Lightbi
• Bootstrap Theme for Personal Blog and Documentations
• W3.CSS Basic