2fa45b92a2
It turns out my original proposal for #20 was correct, but not for the reasons I thought. We need to set both `background-color` and `color` to `initial` on `div.highlight pre` because that's where Chroma sets those colors (including the default `color` if configured). Setting to `initial` there makes it so that if the selected style *doesn't* configure a default color, we'll use the `initial` color, which is going to be the right choice because the reason style author left that unset because they didn't consider dark color schemes messing with their style. Then we `unset` the colors on `div.highlight code` because otherwise the `code` colors from the theme will override the colors that would otherwise be inherited from Chroma's `<pre>` element. Stricly speaking I can't say that setting `background-color` to `initial` is required, because I haven't found a Chroma style that *doesn't* set a `background-color`, but I figure it's possible (at least for a light theme) and it makes sense to fix it just in case, and causes no harm otherwise. |
||
|---|---|---|
| .github | ||
| archetypes | ||
| exampleSite | ||
| images | ||
| layouts | ||
| .gitignore | ||
| .jsbeautifyrc | ||
| LICENSE | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
| theme.toml | ||
Hugo ʕ•ᴥ•ʔ Bear Blog 
🧸 A Hugo-theme based on Bear Blog.
Free, no-nonsense, super-fast blogging.
Demo
For a current & working demo of this theme, please check out https://janraasch.github.io/hugo-bearblog/ 🎯.
Screenshots
⬜️ Light
⬛️ Dark
When the user's browser is running »dark mode«, the dark color scheme will be used automatically. The default is the light/white color scheme. Check out the style.html-file for the implementation.
Sponsor 💟
Support my work on this theme via GitHub Sponsors (recurring) or PayPal (one-time).
Installation
If you already have a Hugo site on your machine, you can simply add this theme via
git submodule add https://github.com/janraasch/hugo-bearblog.git themes/hugo-bearblog
Then, adjust the config.toml as detailed below.
For more information, read the official setup guide of Hugo.
Adjust configuration / config.toml
Please check out the config.toml included in the exampleSite of this theme.
Content & structure
Starting fresh
If you are starting fresh, simply copy over the contents of the exampleSite-directory included in this theme to your source directory. That should give you a good idea about how things work, and then you can go on from there to make the site your own.
Adding / editing content
Index-Page
The contents of the index-page may be changed by editing your content/_index.md-file.
Page
You can add a new page via running
hugo new my-new-page.md
Blog-Post
You can add a new blog-post via running
hugo new blog/my-new-post.md
Adding your branding / colors / css
Add a custom_head.html-file to your layouts/partials-directory. In there you may add a <style>-tag, or you may add a <link>-tag referencing your own custom.css (in case you prefer to have a separate .css-file). Check out the style.html-file to find out which CSS-styles are applied by default.
Issues / Feedback / Contributing
Please use GitHub issues and Pull Requests.
If you do not have a GitHub-account, please hit me up via e-mail (see janraasch.com).
Special Thanks 🎁
A special thank you goes out to Herman, for creating the original ʕ•ᴥ•ʔ Bear Blog.