In the previous post, I made it clear that I wasn’t gonna work on the dark mode for the site till my exams were finished. Funny enough, right after publishing that post rather than studying, I immediately started a new feature branched and got to work implementing dark mode. Two commits later and I had the basic implementation of a dynamically changing dark mode completed, only in the span of about 6 hours of research and coding. All that was left was fine tuning and minor stylistic changes to finish, all of which I completed after my exams were finished.
Next came the difficult part, the actual switching two and from dark mode. The original fork of the personal-website repo from @github actually came bundled with their very own dark mode. Unfortunately, this was a static setting, meaning if you wanted to switch between light or dark mode the entire site needed to be re-rendered by Jekyll. Of course this didn’t work for my use case, so I had to think of a different way to accomplish my task. On top of that, I didn’t really like some of the color and design choices made in the original dark mode, so for my version I made a few alterations.
The main functionality was completed and all that was left were the small minor details that need to be ironed out. First fixing Barba.js, which was incorrectly loading the light version of the content while the site was in dark mode. Barba.js was loading the raw HTML that was saved on the server, but this contented need to be converted to the proper theme before displaying it to the user. This can be easily accomplished by adding my switching function to the ‘fadeIn’ event of the Barba.js script.
The second annoying issue was the ‘flashing’ effect upon refreshing the page in Dark Mode. Chrome would request and display the webpage before my darkMode.js could run and switch the theme. This would result in a rather unsettling flash of white when refreshing the page while in Dark Mode. My solution was to hide the contents of the screen until the the script is finished running and afterwards displaying the contents.
After finally finishing the feature, I myself actually preferred the dark version of the site over the light. The thought of replace the site entirely with a dark theme did cross my mind at one point. But at the end of the day, I thought I might as well keep it for the one person in the world that prefers a light theme over a dark. Right now, I’ve have two weeks off of school before the next semester starts and my life devolves into chaos again. For the time being, I’m done with the website but I definitely have things I wanna change about it in the future. There are a few personal projects I wanna work on, so I’ll definitely be busy. Hopefully I’ll find some time to update the blog from time to time, but until then enjoy the dark mode.