Bearblog has a hard-coded theme by default.

2024-09-23

So I'm working on a complete redesign for something that I already do on Bearblog. I'm really excited about it, but I decided to make a new blog to prototype it.

I wanted to use the microblog theme on it, so I did. And when you make a new blog, by default the style sheet for the CSS theme is completely empty. So I just took my microblog theme and I just slapped it on there.

But the strangest thing happened. The font that I use for the title, it just didn't work. A different, default font would appear instead, and it wasn't the one I wanted.

I couldn't understand it. It didn't make sense. It's the exact same theme. Why does it behave differently? So I talked about it with a friend of mine who has been very helpful. She knows a lot about CSS and she is very encouraging.

She grabbed my laptop and she started to do her thing with the inspect tool from Firefox and so on and I had an idea. What if I needed to apply the base theme it's based on first before placing the CSS style sheet?

Well, it turns out that was a solution to the problem. But the reason why it happens is very interesting.

My friend was very confused when looking at the prototype blog. She told me "there are two CSS themes on top of each others." I was confused at first, but then I understood very quickly what was going on.

It turns out, Bearblog, by default, has a hard-coded CSS theme that only disappears once you apply another theme. Once you did that, leaving the CSS text box empty would result in a completely basic HTML page. But if you don't touch it, you'll have a default theme. And if you immediately start putting in your own CSS stuff without applying one of the base theme on a brand new blog, then this hard-coded CSS style sheet remains there, and it fucks things up because the two of them are conflicting.

I figured out really fast that this was what was happening because I had already noticed in the past that by default, the theme you're getting on a brand new blog is actually slightly different than the one you will get when you apply the named default theme. Notably, by default, the hard-coded theme has a width of 800px, while the default theme has a width of 720px.

So, I made a brand new blog just for this which I am going to close right after posting this. I went into the inspect thing of Firefox and extracted the CSS theme.

Here it is:

      :root {
    --width: 800px;
    --font-main: Verdana, sans-serif;
    --font-secondary: Verdana, sans-serif;
    --font-scale: 1em;
    --background-color: #fff;
    --heading-color: #222;
    --text-color: #444;
    --link-color: #3273dc;
    --visited-color:  #8b6fcb;
    --code-background-color: #f2f2f2;
    --code-color: #222;
    --blockquote-color: #222;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #01242e;
        --heading-color: #eee;
        --text-color: #ddd;
        --link-color: #8cc2dd;
        --visited-color:  #8b6fcb;
        --code-background-color: #000;
        --code-color: #ddd;
        --blockquote-color: #ccc;
    }
}

body {
    font-family: var(--font-secondary);
    font-size: var(--font-scale);
    margin: auto;
    padding: 20px;
    max-width: var(--width);
    text-align: left;
    background-color: var(--background-color);
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.5;
    color: var(--text-color);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-main);
    color: var(--heading-color);
}

a {
    color: var(--link-color);
    cursor: pointer;
    text-decoration: none;
}

a:hover {
    text-decoration: underline; 
}

nav a {
    margin-right: 8px;
}

strong, b {
    color: var(--heading-color);
}

button {
    margin: 0;
    cursor: pointer;
}

main {
    line-height: 1.6;
}

table {
    width: 100%;
}

hr {
    border: 0;
    border-top: 1px dashed;
}

img {
    max-width: 100%;
}

code {
    font-family: monospace;
    padding: 2px;
    background-color: var(--code-background-color);
    color: var(--code-color);
    border-radius: 3px;
}

blockquote {
    border-left: 1px solid #999;
    color: var(--code-color);
    padding-left: 20px;
    font-style: italic;
}

footer {
    padding: 25px 0;
    text-align: center;
}

.title:hover {
    text-decoration: none;
}

.title h1 {
    font-size: 1.5em;
}

.inline {
    width: auto !important;
}

.highlight, .code {
    padding: 1px 15px;
    background-color: var(--code-background-color);
    color: var(--code-color);
    border-radius: 3px;
    margin-block-start: 1em;
    margin-block-end: 1em;
    overflow-x: auto;
}

/* blog post list */
ul.blog-posts {
    list-style-type: none;
    padding: unset;
}

ul.blog-posts li {
    display: flex;
}

ul.blog-posts li span {
    flex: 0 0 130px;
}

ul.blog-posts li a:visited {
    color: var(--visited-color);
}

It's not the exact same as the actually named "Default" CSS theme. And the font from that was conflicting with the font I wanted.

There you go. This is just a weird quirk of Bearblog, but I find it interesting and worth noting.