bake / solar-theme-hugo

A port of solar-theme-ghost for Hugo

Solar Theme for Hugo

A minimalistic theme for Hugo blogs, fork of Solar Theme for Ghost. There is a demo available on Hugos theme list. See the example config.toml for a starting point.

Color schemes

Solar offers three color schemes: (Solarized) light, (Solarized) dark (default) and gray. Additionally there is a preference setting which switches between light and dark according to the users preference.

Screenshot

Additional HTML

Custom HTML can be injected just before </head> and </body> by creating a head.html or foot.html inside the sites layouts/partials/ folder. The default (empty) logo can be overwritten by creating a logo.svg in static/img/.

Syntax Highlighting

This theme does not bring a syntax highlighter. If you want to use Hugos built in one, remember to update the color scheme by setting pygmentsStyle. The pygments style solarized-dark, for example, matches the themes dark color scheme, while solarized-light matches light and solarized-dark256 works well with gray.

Otherwise, if you want to use a JavaScript highlighter like highlight.js, the necessary JavaScript can be placed inside static/ and get included by providing a footer.html as described above.

Installation

Same as with any other theme:

$ git clone https://github.com/bake/solar-theme-hugo.git themes/solar-theme-hugo
$ hugo server --theme solar-theme-hugo
...

License

GPLv2 or higher

solar-theme-hugo's Issues

Reference to localhost

Hi, thank you for sharing this theme.

I have tried to install it but I have issues that the CSS is being referred using localhost which broke the visual.

So, I use the config.toml that is included in the exampleSite and start the site:

hugo server --port 3000 --bind "0.0.0.0"

I got the following from Firefox debug tool. The site loads and I can see content, however the stylesheet is broken being served using localhost. I don't know if this is relevant, I install it on raspberrypi which uses ARM architecture.

Allow overwriting the logo

List-style bullet does not exist

Hi,
Not sure if I am missing something (font-wise or otherwise). The unordered lists show up as numbered lists. You can see this on the sample page as well at https://themes.gohugo.io//theme/solar-theme-hugo/post/markdown-syntax/.

From browsing MDN, the solution seems to be to use "disc" for unordered lists.

Thanks.

Broken demo page.

Your demo page seems to be not working correctly on the gohugo site.

Consider using prefers-color-scheme to provide an automatic light/dark selection

The prefers-color-scheme media query is supported by all major browsers, and switching automatically from light to dark would be a nice touch. It looks like it would mostly be a matter of loading conditionally one CSS file or the other, with something like that:

<script>
  // Fallback if prefers-color-scheme is not supported
  if (window.matchMedia('(prefers-color-scheme)').media === 'not all') {
    document.documentElement.style.display = 'none';
    document.head.insertAdjacentHTML(
        'beforeend',
        '<link rel="stylesheet" href="/light.css" onload="document.documentElement.style.display = ``">'
    );
  }
</script>
<link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="/light.css" media="(prefers-color-scheme: no-preference), (prefers-color-scheme: light)">
<link rel="stylesheet" href="/style.css">