Adding Dark Mode to Infinite Diaries


Mozilla released Firefox 67 a few days ago and they introduced support Dark Mode, as Safari did a while ago too. This prompted me to finally tackle implementing this feature here, on Infinite Diaries, hacking through my CSS. I should have spent the time to rewrite it from scratch, using CSS variables, but that will have to be done another day.

P.S. You might have to clear your browser’s cache to get it to work.

I chose to use Panic’s Panic Palette as my starting point, since I’ve been using it as my Terminal theme for years now, since 2015 or so. Panic Palette has a nice dark-but-not-black background and I started experimenting with various highlight colours first — I really like how their cyan blends in nicely (above screenshot).

After getting some quick feedback from a few friends, I started playing around a bit more, to make blockquotes and other elements stand out a bit more.

I quickly discovered that I can get surprisingly varying results using just their few highlight colours and quite frankly, I couldn’t make my mind up on which direction to proceed in.

I have settled on most toned down version I came up with for now, where links are being barely highlighed, but there’s something about this combination that I really enjoy.

Anyway, Infinite Diaries now supports Dark Mode in Safari and Firefox. I’m sure there are still some bugs in my CSS, so do let me know if you find anything. And if you have any feedback, just catch me on Twitter @morid1n.

Chcesz zwrócić mi na coś uwagę lub skomentować? Zapraszam na @morid1n.

Comments are closed.