Black & Light is a high-contrast, text-oriented, JavaScript-free theme for the Hugo static site generator, engineered to load in a single request and earn a perfect Google Page Speed score.
What is Black & Light?
Black & Light is a theme for Hugo, the popular Go-based static site generator. It takes Markdown content and renders it into a static website with a strict black-and-white, high-contrast design. The theme is built without JavaScript, inlines all styles in the head, and is designed to load everything in one HTTP request when web-fonts are disabled. It is created by David Hamp-Gonsalves and released under the GPL 3.0 license.
Key Features
- Single-request loading — With web-fonts disabled, the entire page loads in a single HTTP request, reducing round-trips and improving load time.
- Perfect Page Speed scores — The theme reports a 100/100 score on Google's Page Speed test for both desktop and mobile when web-fonts are disabled.
- No JavaScript — The theme is scriptless unless you configure Google Analytics; only then does it include the necessary tracking script.
- Inlined styles — All CSS is inlined in the head of the document, so there are no separate stylesheet requests.
- Dark mode support — The theme honors the user's system preference via the CSS
prefers-color-schememedia query, automatically switching to a dark color scheme. - High-resolution favicons — High-resolution favicon assets are included for modern browsers and platforms.
Who is it for?
Black & Light is ideal for developers and writers who want a distraction-free reading experience. It suits personal blogs, documentation sites, and text-heavy portfolios where content is the center of attention. The theme is also a strong choice for performance-conscious site owners who prioritize Page Speed scores and minimal resource usage.
What can you do with Black & Light?
- Personal bloggers: Publish a clean, fast-loading blog with Markdown-based writing, with no JavaScript to slow down readers.
- Documentation maintainers: Create a readable, high-contrast documentation site that works well on both light and dark screens.
- Performance enthusiasts: Deploy a site that can achieve a 100/100 Page Speed score, especially when web-fonts are disabled.
How does Black & Light work?
Installation is straightforward: inside your Hugo project folder, run git submodule add https://github.com/davidhampgonsalves/hugo-black-and-light-theme.git themes/black-and-light. Then copy the exampleSite's config.toml from the repository to your site root, or use it as a reference. The theme then processes your Markdown content through Hugo and outputs a static site.
Pricing
Black & Light is free and open source, released under the GPL 3.0 license. Anyone can use, modify, and redistribute the theme, provided derivative works share the same license.
FAQ
Is Black & Light free?
Yes. The theme is fully open source under the GPL 3.0 license, so you can use it for personal or commercial projects without charge.
Does Black & Light use JavaScript?
No, the theme is scriptless by default. It only includes Google Analytics JavaScript if you configure it in the site's configuration. This keeps the page free of client-side scripting.
How do I install Black & Light?
Use Hugo's theme installation method: git submodule add https://github.com/davidhampgonsalves/hugo-black-and-light-theme.git themes/black-and-light in the root of your Hugo site, then copy the exampleSite config.toml file.
Does Black & Light support dark mode?
Yes. The theme includes a built-in dark color scheme that responds to the CSS prefers-color-scheme media query, so it automatically adapts to your visitor's system setting.
What Page Speed score does Black & Light get?
The theme reports a 100/100 score on Google Page Speed for both mobile and desktop when web-fonts are disabled. With web-fonts enabled, the score is still 100/100 on desktop.
