LofiCode is a cozy, lo-fi inspired Hugo theme for developers and creatives who want a retro-styled blog with built-in ambient sounds, live search, and dark/light mode.
What is LofiCode?
LofiCode is a Hugo theme built by @madebydia that turns a standard Hugo site into a warm, lo-fi styled blog. It takes your Markdown content and renders a responsive static site with a retro aesthetic, an ambient sound player, live search, and automatic light/dark themes. The theme requires Hugo Extended v0.112.0 or later and is released under the MIT License.
Key Features
- Ambient sound player — Includes three Creative Commons licensed sounds (coffee shop, rain, fireplace) that can be toggled and adjusted from a bottom control bar.
- Dark/light mode — Automatically detects user preference with a manual toggle; colors are controlled via CSS custom properties such as --accent-primary, --accent-secondary, and --accent-tertiary.
- Live search — Real-time search across all posts with no server-side dependencies.
- Table of contents — Auto-generated TOC for blog posts to help readers navigate.
- Syntax highlighting — Code blocks with a copy-to-clipboard button.
- Coffee-themed reading time — Reading time displayed with coffee cups, matching the lo-fi motif.
- SPA navigation — Client-side page transitions for a smooth single-page-app experience.
- Responsive design — Mobile-first layout works from 320px to desktop, and includes WCAG-compliant ARIA labels.
Who is it for?
- Hugo developers — They can quickly install the theme via git clone or submodule and configure it entirely through hugo.toml, including author profile, social links, and navigation menu.
- Creatives and writers — The cozy, lo-fi aesthetic, ambient sounds, and coffee-themed reading indicators create an inviting atmosphere for personal blogs and creative portfolios.
- Tech bloggers — Features like syntax highlighting with copy buttons, auto-generated tables of contents, and performance optimizations (lazy loading images, optimized fonts) suit technical writing.
What can you do with it?
- Personal bloggers — Publish Markdown posts with front matter options like featured and mood badges, and embed a coffee-break shortcode for cozy interludes.
- Portfolio owners — Customize the profile section, tagline, photo, and social links to build a homepage that highlights your work.
- Tech writers — Write tutorials with syntax-highlighted code blocks, a TOC, and reading time indicators, all in a fast static site.
How does it work?
Clone the repository into your Hugo themes directory or add it as a Git submodule, set the theme name in hugo.toml, create content with hugo new posts/my-first-post.md, and run hugo server -D for local development. The theme reads all configuration from hugo.toml params, including author, profile, social network URLs, and menu items.
FAQ
Is LofiCode free?
Yes. LofiCode is open source under the MIT License, so it is free to use, modify, and redistribute, for personal or commercial projects.
What Hugo version do I need?
Hugo Extended v0.112.0 or later. The Extended edition is required for full SCSS/Sass compilation.
Can I customize the colors?
Yes. The theme uses CSS custom properties defined in :root. Override variables like --accent-primary, --accent-secondary, and --accent-tertiary in your own CSS to change the look.
Which ambient sounds are included?
Three sounds: Coffee Shop by Rylius, Rain by _lynks, and Fireplace by TheBoatman. All are licensed under Creative Commons and included with the theme.
How do I add social links?
Add any of the supported platforms (GitHub, Twitter/X, LinkedIn, Email, Mastodon, YouTube, Instagram, Facebook) to [params.social] in hugo.toml. Only platforms you configure are displayed, with automatic URL formatting and icons.
