librewolf & bearblog dark mode
I use Librewolf as my main browser. It's a fork of Firefox that changes some stuff about telemetry and more. Sadly, the main available version of it locks the choice of dark and light mode, and stays permanently light mode. There's a version of it that allows dark mode, but it takes ages to compile from the AUR and I only have it on my older laptop since compiling has always failed because of some dead URLs or some repo being down on my main laptop.
So I tried to do something about it that doesn't need me to compile ages all the time for every update.
On Bearblog, you can customize your dashboard, so I did that, but it's just that; doesn't affect the main page and Discover section.
If you are curious about my dashboard customizations:
body {
max-width: 900px;
background-color: #01242e;
color: white;
}
.helptext, .sticky-controls {
background-color: #01242e;
}
textarea, input:not([type="submit"]),.editable {
background-color: #004052;
}
button {
padding: 10px 15px;
background-color: #eceff4;
border-radius: 10px;
border: 0;
}
These are the colors of the default Bearblog dark mode, but as I said, it only works for the dashboard itself and your blogs.
For the rest, I've now downloaded Stylebot (browser extension to apply custom CSS to websites) and applied the following code:
body {
background-color: #01242e;
color: white;
}
header, main, h1, h2, h3, h4, h5, b {
color: white;
}
a {
color: #8cc2dd;
}
.helptext, .sticky-controls {
background-color: #01242e;
}
textarea, input:not([type="submit"]), .editable {
background-color: #004052;
}
Some of this repeats my dashboard customizations because they already existed so I copied them over, some is new. For some reason, specifying color:white in body was not enough to target any headers or bold font, so I had to specify it. The background of the buttons on top of posts and below the post editor (helptext, sticky-controls) also had to get their own background CSS.
Also, Stylebot currently doesn't seem to open correctly; you are supposed to be able to open the extension on the website you want to edit and then select the elements you want to style, kind of like the uBlock dropper. I wasn't able to do that, and the Github has open issues mentioning this, but writing the CSS file yourself still works.
Maybe this is useful for you if you also use the standard Librewolf, or if you prefer your system or browser to be in light mode but want to use Bearblog in dark mode.
Published 25 Dec, 2024