Personal Website Updates - Dark & Light Mode Support

In working on updating my personal website, I made sure to support dark-mode preferences from the beginning. While initially a challenge to double-check all color and contrast choices work equally well across both formats, it will make adding future pages much easier. Here's a demo of the home and Tools page that I've recently launched.

In addition to the typography and code-base having responsive color theming, I also made sure that the image assets themselves are responsive to the light & dark modes - using the Subtract method, the images are effectively masks. This worked in nearly all instances, with some exceptions for brands that have a color palette that doesn't easily work on both backgrounds and/or ones that have multiple colors, where changing the colors for each mode would affect the appearance too drastically.

This is very much a work-in-progress, and I'm going to steadily build out case study pages, along with visually update the Gear page to have custom icons for each piece of hardware/software shown, along with adding more items to that page.

Let me know your thoughts!

Check out the live site.

Gear Page