Back to the blog

My custom theme

Published on

Tags: tech

Although at times I’ve wanted to host my blog on my own server, the truth is that each platform has its own community. One of the reasons I chose bearblog is because it lets you discover lots of indie blogs that I never would have come across otherwise.

So today, I want to share my custom theme. I’ve seen many people using similar ones, but mine includes a couple of tweaks you might like. If you just want to copy and paste the complete theme, you can grab it here: gist.github.com

But if you’d like to tweak the colors a bit, here’s a quick breakdown:

:root {
    - -width: 720px;
    - -font-main: 'Roboto Mono', monospace;
    - -font-secondary: 'Roboto Mono', monospace;
    - -font-scale: .9em;
    - -background-color: #ffffffc0;
    - -heading-color: #232333;
    - -text-color: #232333;
    - -link-color: #232333;
    - -visited-color: #232333;
    - -main-color: salmon;
    - -code-background-color: #f2f2f2;
    - -code-color: #222;
    - -blockquote-color: #222;
    - -tags-color: #7dbbfa;
    - -bg-pattern: url("data:image/svg+xml,...");
}

The most important variables are:

  • --background-color: This sets the background color with some transparency to let the pattern show through.
  • --main-color: This is the color of the top menu.
  • --tags-color: This defines the color of the tags that appear below each post.
  • --bg-pattern: This is the SVG background image. If you’d like to get more patterns, check out: heropatterns.com

I hope you like it ✨