As I've been using WriteFreely, I've found that the dark mode support oddly starts—and stops—on the blog writing page. While there is technically a toggle for dark mode on the instance reader page, you can only make out a few sentences before you're whisked away to another unforgiving flash-bang. While I'm not exactly sure why this is the case, I do know that I have some power to change it; more power than expected, actually. This brings us to where the magic happens, assuming you know what you're doing: custom CSS rules. The thing is, I have absolutely no idea what I'm doing, and the things I want to do are seemingly uncharted territory. How; genuinely how‽
My absurd requests:
- A simple dark mode layout.
- Justified post body text.
I imagined that doing something like justifying text would be simpler than an entire theme, so I set off looking for answers. Digging through the writer guide brought up nothing, so I fervently clacked away, until I came across a several year old forum post on the matter. Not knowing what I was doing, I was happy to copy what seemed like a complete answer from Matt, the founder of Write.as. There was a warning about single spaces not functioning, but I figured “I separate paragraphs with multiple line breaks anyway, it'll be fine!” It was not fine; my entire blog post turned into a single rectangular mass. Additional line breaks did not help stave the amalgam, and I was left a bit conflicted. On the one hand, it's very evident I can justify text, but on the other, I can't really justify keeping it in this state.
If that was going to give me trouble, perhaps I can spend more time looking into dark themes. The first place I go to check is the Write.as themes page, to where I am greeted with a surprisingly limited selection. Out of everything, only one theme even seemed to resemble a dark palette at all: Painkiller Bullet. It's in the ballpark, so I do try it out, but gives off a bit of hacker type vibes, which isn't really the style I want personally. I did try changing some colors, but it feels like there's a number of things here I don't understand. Perhaps I could've sat with it longer, but I figured that if I was going to understand anything, I'm going to have to throw the baby out with the bathwater, and make changes—one at a time.
Enter: Duct Tape
Carl Sagan once said, “If you wish to make an apple pie from scratch, you must first invent the universe.” If you want to do that with a dark theme for someone else's website, I guess you have to stare at inspect element until you can't keep your eyes open. Between the very basic style info in the writers guide, pulling variables in inspect element, and consulting with W3Schools, I slowly managed to cobble together my custom theme. My vision was heavily inspired by one of the templates from System76's COSMIC dark mode, which has an umber background, along with yellow links, and an off-white base text. Surprisingly, I was able to get pretty far along, and I feel like I've (mostly) gotten to the point where basic stuff is presentable now. I even added some additional rules to match some personal tastes, like having titles be sans-serif, with the body being serif type. Also yes, I've fixed my justify problem, and can finally sleep at night knowing my margins are nice and orderly.
That being said, not only have I run into some limitations, but I also have already managed to create quite the mess of code. Things are not ordered in a sensible way, my comments are outdated, and I'm sure I'll need to add even more rules before I actually begin to clean it up. I intend to use this blog entry to help with figuring that out, since I won't know something is broken, until I try to actually use it. Once I do manage to clean up everything I feasibly can, my intent is to make variants of this theme for other blogs. Perhaps one inspired by KDE Plasma's dark breeze theme, or maybe one of the Dracula style dark themes I've seen in programs such as Voyager would be a good second version. As for the limitations, there seems to be some oddly hard-coded problems I can't work around with my custom style sheet. For example, this little bugger is jammed right into the webpage directly, so no matter what I do, it overwrites all style rules:
.post-byline .byline-author {
display:inline-flex;
align-items:center;
gap:0.5rem;
text-decoration:none;
color:#666;
font-size:0.9rem;
}
Most of this stuff isn't too big of a deal, but seriously, I'm forced to have a specific color of gray text for my author name‽ In order to make this not an absolute contrast nightmare, I had to turn my name into a faux button; a button far darker than anything else in the theme too. It doesn't look awful, but it does absolutely stick out in a way I'm not particularly keen on. I also can't for the life of me find a way to change my context menu icons from dark to light. Thankfully that's something only I can see, though I did manage to give them a background, and reduce their opacity to blend it better. Also, I ran into a roadblock you didn't even notice, despite it still impacting me as of this writing: blog avatars are broken. You might be saying to yourself “but I saw your avatar at the top of this article,” and you'd be fair to say that—but you're wrong.
Hacking In An Avatar
Note: This was written on a now defunct instance, which had avatars.
Assuming it's still broken when you read this, try right clicking and opening my avatar in a new tab. You probably noticed it threw a lovely 404 not found error, and tries to find an image called default.png. This is because I am totally unable to upload an avatar, but more than that, the default fallback avatars are broken too. Now, of course I brought this to the attention of the kind hosts of this instance, but in the interim, I was determined to prod at this until I made something happen. I have a feeling that I can hypothetically pull this off, because I can see that images can load through CSS, and there are a few tutorials on it through W3Schools too. Also, I'll need a reasonably reliable host to service the image as well. I figure since it's an avatar anyway, that I could just source it from one of several sites I use this exact image for the same purpose. Let's get a better look at our objective, shall we?
“The mission is simple: get me in there.”
I ended up choosing my profile from Etterna Online, a website for a FOSS rhythm game. I went with it because I know the owner, and I know full well this is exactly the place which won't care whatsoever, that I'm hot-linking a small image to an even smaller blog. When I added it as the background for the the property which controls the avatar, I suddenly see nothing but blue—fantastic! That means it's loaded the image at full size inside the circle, and now I simply need to reduce it to the correct value. This turned out to be 28px by 28px, and was very simple to append to the image properties. So with that, I managed to hack my way to a faux profile picture, effectively indistinguishable from a normal one. On top of that, I can do this for any blog independently, meaning they can all have different faux avatars for as long as necessary. Realistically, even if it were never resolved, I still won; I feel really good about that.
I suppose I need to test tables too:
| Status | Action |
|---|---|
| Working | Relax |
| Broken | Resolve |
All writing is licensed under CC-BY-ND with attribution to Foxfire. The FSF recommends this license for opinion pieces.