Scary Stories to Tell in the Dark (Mode)

After learning through web analytics that 38% of our users have turned on dark mode at the operating-system level, we decided to implement dark mode on our library’s website. We designed a dark color palette that balanced brand identity, readability, and accessibility, then implemented it using the new light-dark() CSS function. This approach allowed us to define paired colors for light and dark modes across our stylesheets. We’ll share the project’s scope, implementation details, testing process, and slightly scary lessons we learned the hard way. You, too, can implement dark mode and receive user feedback like this: “Yes yes yes yay this is amazing!!!!!! This is life changing for me.” “OMG thank you! My eyes are happy!”