WORDS // DARK MODE AND OTHER THINGS


Dark Mode and other things

It's been awhile since my last changes to the site. To be fair they've been complete for a while, just not taken live 😅

This post is primarily about these changes, and what better time to post about them now that we are moving out of the Covid-19 lockdown!

Dark Mode

One thing that personally makes my experience browsing the web pleasant is when a website supports dark mode. It seems like a minor thing, but I find my eyes more relaxed and an improved ability to focus on the content of a site.

The background of a website should be just that - a background. Dark mode makes that happen and allows the content to shine!

Gif showing dark mode toggle

The rundown

Overall I found dark mode fairly straightforward to implement, as it just involved setting up some CSS rules and implementing the use-dark-mode react hook.

The two challenges I faced were namely the dark mode toggle's flipping animation, and ensuring my static content would also respect dark mode.

The flipping animation

I really wanted to capture the physical flip of a card with this animation. Now CSS isn't a strength of mine, especially when it comes to animation, but I think it turned out alright!

The way it works is essentially by taking advantage of a 180 degree flip on the y axis. When an image is upside down in this sense, it shows as invisible with backface-visibility: hidden; Thus by having two images which are offset by 180 degrees, when you rotate both, you get the effect of one image being the back face of the other.

I also had another weird issue just with chrome, where background color needs set in order for the transform to actually work.

Images

As for the images, I had to make sure they were still visible in both dark and light modes. This was particularly important for the site logo itself, as well as the Github icon. One of the main things about working with contrasting themes is ensuring your content looks good in both themes. It should also go without saying that this switch should be swift, and not noticeable by your users. Responsiveness is key here, which brings me to:

Responsiveness

With this update I also took the time to refine fix 😅 my website's mobile responsiveness. My first pass in this area wasn't so great. As I mentioned earlier, CSS is not a strength. I've found that my react native flexbox skills came in really handy, and paired these with some media queries. Then I was able to get a slightly different look across desktop, tablet, and mobile.

Before

Gif showing old responsiveness

As you can see the mobile menu was essentially unusable, and the footer has broken too. Even the logo ended up squished.

After

Gif showing new responsiveness

Now it is much better!

And one more thing..

As you've probably noticed, inline images are now possible in my markdown blogposts! This is great for show and tell, especially with gifs 😁

Anyway, as always this site is a continual work in progress whenever I get time to update it

Copyright © 2020, Matt McConway.