Solar is a minimalistic Hugo theme for blogs, ported from the Solar theme for Ghost, that offers Solarized light, dark, and gray color schemes with a user-preference auto-switch.
What is Solar?
Solar is a free, open-source theme for the Hugo static site generator, designed specifically for blog sites. It is a port of the Solar Theme for Ghost by Matt Harzewski (mattvh) and is available on the official Hugo theme gallery with a live demo. The theme takes standard Hugo content (Markdown files with front matter) as input and renders it as a clean, Solarized-styled blog. It is licensed under GPLv2 or higher.
Key Features
- Three Solarized color schemes — Light, dark (default), and gray; a "preference" mode automatically switches between light and dark based on the visitor's system preference.
- Custom HTML injection — Place markup in layouts/partials/head.html or foot.html to inject code just before the closing head or body tag on every page.
- Overridable logo — Drop a logo.svg into static/img/ to replace the default empty logo.
- No bundled syntax highlighter — The theme stays minimal; use Hugo's built-in Chroma with a pygmentsStyle such as solarized-dark, solarized-light, or solarized-dark256 to match each color scheme, or add a JavaScript highlighter like highlight.js via a custom footer partial.
- Standard Hugo workflow — Install by cloning the repository into themes/solar-theme-hugo and starting the server with hugo server --theme solar-theme-hugo.
Who should use Solar?
- Independent bloggers — Publish a personal or niche blog with a distraction-free, Solarized-themed layout.
- Solarized enthusiasts — Extend the same color palette used in your editor and terminal to your website.
- Developers who customize — Take advantage of head.html and foot.html hooks to add analytics, custom fonts, or other third-party scripts.
What can you do with Solar?
- Personal bloggers: Write posts in Markdown and get automatic light/dark mode based on each visitor's preference.
- Technical writers: Pair Solar with Hugo's syntax highlighting to display code snippets in a matching Solarized palette.
- Theme hobbyists: Use the minimal theme as a starting point and override partials to build a custom blog design.
How does Solar work?
Solar follows the standard Hugo theme setup. Clone the Git repository into your Hugo project's themes folder, then reference solar-theme-hugo in your site configuration. An example config.toml is provided in the exampleSite folder to get you started. Run hugo server with the theme flag and the site builds with the selected color scheme.
Pros and cons
- Pros: Free under GPLv2+; three Solarized schemes; optional automatic dark mode; custom HTML slots for scripts and styles.
- Cons: No syntax highlighter included, so you must configure one yourself; the theme is minimal and intentionally lacks extra features like comments or search.
Pricing
Solar is free and open source, released under the GPLv2 or higher license. There are no paid tiers or premium features.
FAQ
Is Solar free to use?
Yes, Solar is open source and free to use for any project. It is licensed under GPLv2 or higher, so you can modify and redistribute it as long as you keep the license.
Does Solar support dark mode?
Solar includes Solarized dark as the default color scheme. It also offers light and gray schemes, plus a "preference" mode that switches between light and dark automatically based on the user's operating system or browser preference.
How do I install Solar for Hugo?
Clone the repository to your Hugo site's themes directory, for example with git clone https://github.com/bake/solar-theme-hugo.git themes/solar-theme-hugo. Then run hugo server --theme solar-theme-hugo to preview the site locally.
Can I add custom code to Solar?
Yes. Create a head.html or foot.html file inside your site's layouts/partials/ folder, and Solar will inject the contents just before the closing head or body tag on every page. You can also replace the logo by adding logo.svg to static/img/.
Does Solar include syntax highlighting?
No. Solar does not bundle a syntax highlighter. You can enable Hugo's built-in Chroma highlighting by setting a matching pygmentsStyle in your config, or integrate a JavaScript highlighter such as highlight.js through a custom footer.html partial.
