Dark Mode

23rd April 2019

  • Blog
  • Gatsby

I’ve redesigned my site! If you followed me back when I used Jekyll this was a regular occurance and something that using a static site generator makes so easy.

There has been a trend of late of adding a dark mode to sites. From what I can see there are 2 main reasons for this. The darker page is kinder on the eyes when viewed in a low-light environment and with the growing number of users who desktops are running in dark mode all the time it reduces the contrast they experiance.

Quite a few sites are adding functionality to switch between light and dark mode (for example with react hooks) which I could have used here but for now at least I’m leading with dark mode.

My decision to drop light mode came around for a few reasons.

  1. There is no way to tell if the user is using dark mode on their device (yet). This means I have to default to either light or dark and let the user switch, I can see a scenario where a dark mode user would be blinded by light mode before swapping whilst I can’t think of a negative for light mode users who load up in dark mode.
  2. Maintaining two colour schemes means maintaining two colour schemes. I’d have a harder job testing content against both colour schemes and with accessibility in mide I’d rather put my focus into a single theme.
  3. I’d like users to have a consistent experiance. If I’m making content I’d like all my users to see it at its best and invariably there will be content that looks better in one mode.

Following the example of resir014’s design page I’ve put all the elements of the site onto a single page for testing and showing off. You can see this page here and I will be updating it as I add more features.

I have ideas on how to exampnd this site which I hope to get going soon and I welcome any feedback you have on the new layout.