Website Dark Modes

With MacOS Mojave it introduced an operating system wide dark mode, which is great as I prefer it and now with it coming to iOS 13 I will look to use it there as well, but there is a problem, whenever I look at a website which is plain white after I have used a dark website for a while it is rather jarring.

Because of this I never use it as I do not get the opposite effect so I like sticking to a light mode because for every site out there that does not have a dark mode that I use I am better off not using it.

Today I have implemented prefers-color-scheme within this site, and promise to add it to any other sites I work on or develop when I can, because with Chrome supporting this in beta I suspect soon enough I will be able to enjoy using a dark mode.

It did not take much time to implement either, about 20 minutes or so going through the site. I removed comments though as the comment supplier did not really have a way of working around this, but never mind! Nothing lost I think, just hit me up on twitter if you have a comment!

I need to work in images once I post one to implement the semi-transparent black then hover option on it which will make things easier if it transitions in.

For simple diagrams the invert and rotate 180 degrees trick is a good option but not something that can be done for photos, to reduce the jarring effect transitioning in on hover or touch is great but there needs to be some UX considerations with this and how it is done. I might work on something here and let you know.