For those who have been here before, you may have noticed some changes to the website. There has been a revamp of the website, so in this post, I’ll briefly discuss what changes I made, how they were done, and why.

Colours

Although a long term fan of the Dracula Theme, I have since become drawn to the variety found in the Catppuccin Theme. In particular, I greatly enjoy its Mocha in Green. Since discovering it, I have been on a gradual mission to slowly convert as much of my computing experience to Catppuccin Mocha Green as possible, and recently realised that my website could be changed too.

It was easier said than done, with although the basic CSS easily modified by creating a theme-vars-override file, changing the syntax took hours to work out. In the end, I abandoned efforts to use Chroma as I failed to get it implemented correctly, and instead modified it via a Highlight.js file and following this guide.

<style>
@import "/catppuccin-latte.css" root;
@import "/catppuccin-mocha.css" (prefers-color-scheme: dark);
</style>

However, I did have to modify the light theme, known as Latte, a bit, as my configuration of it failed some colour contrast tests. Though this then sent me into a new problem, I couldn’t work out how to apply syntax styles for both light and dark themes on the website toggle. I did try a guide, but for some reason, struggled to get the light theme showing the correct syntax colours.

Ordinarily, I wouldn’t be so fussy over some colours not working as intended, but the issue was one over accessibility - the syntax in light mode would fail accessibility tests as there isn’t enough contrast. So I had to fix it.

Theme

I tried turning light mode off to prevent the issue, but couldn’t get that to work either. Feeling a bit like a failure now as I was struggling to get anything to work, I then decided to step back a rethink the website theme entirely.

PaperModX

Initially, I tried a fork of the PaperMod theme I was using, called PaperModX, as it spoke about having Chroma support out of the box, and I also found the CSS easier to edit. I managed to get to configured quite well, but I continued to struggle with the syntax changing depending on the light or dark mode toggle, even now I had Chroma. I decided I needed a theme which had the Chroma not only built in, but changeable based on the dark or light mode being toggled.

LoveIt

I saw LoveIt discussed during one of my many troubleshooting web searches, with someone suggesting PaperMod implement a feature like LoveIt had done. I actually looked at many themes at this point, and initially ruled out LoveIt as a bit too much - containing many features I didn’t need. However, after investigating more simpler themes, and running into one issue or another, I decided to try it out again.

I liked how it has been mostly easily customisable, being able to change much of the CSS simply through the _variables.css file, though had to import the CSS found elsewhere needed for editing Mermaid diagrams.

Mermaid Diagrams

Speaking of which, I decided to make a switch to using Mermaid diagrams instead of images of diagrams for accessibility reasons, and liked how these appeared to have different themes - could these be toggled into light or dark mode?

Apparently, but I cannot work out how. As such, after much struggle, I had to give up, and instead try to create a theme for the diagrams which works in both modes, as such, it’s a pretty ugly grey, but not much I can do about it - unless any one has any ideas? You can contact me via my Mastodon account if you do!

Speaking of help, I’m also open to knowing why my arrowheads in the Mermaid diagrams are so tiny (as can be seen in this post here)!

Images

As this was all going on, I realised with the images I had used for the post covers were no longer going to match the toggled theme either, they would have the colours for either light or dark mode, and while I good try to make them work for both using grey, like I did with the Mermaid diagrams, I realised my perspective on images has changed significantly over the past few months anyway.

My time on Mastodon has made me rethink the use of images as a whole. While I had alt-text for all my post cover images, I began becoming more aware of useful alt-text while using Mastodon, and I appreciated how the platform is more text based as fewer people used images compared to elsewhere online. I decided that I didn’t really need images here, they weren’t adding much to begin with.

Conclusion

As a result, I am now using the LoveIt theme, with modified light and dark modes based on Catppuccin Latte and Mocha in Green, with no images, and added Mermaid diagrams. I am hoping not to really change much again, as this was quite an undertaking, but I am hopeful to find a way to fix my issues with the Mermaid diagrams I previously mentioned!