Implementing Dark Mode on the Libraries Website
We created a “dark mode” color scheme for the Libraries’ main website. In support of this effort, we conducted user research, in which participants responded positively to the look and feel of the website in dark mode. Participants who told us they used dark mode on their own devices said they did so because it was “easier on the eyes.”
Overview
Many operating systems, websites, and applications offer a “dark mode,” which inverts the usual color scheme of dark-text-on-light-background. A darker appearance is gentler for some users’ vision, particularly at night or in a dark room.
Our web analytics told us that 38% of our users have turned on dark mode in their operating system (OS). Since so many of our users prefer a darker color scheme, we set out to implement one on our website. If a user’s OS is set to dark mode, they will see the Libraries website in dark mode, too.
User research questions & findings
In a study, we asked 16 participants for their feedback on the new color scheme.
How do users respond to our website in dark mode?
We showed them the Libraries homepage in dark mode and asked them about their first impressions.
Positive comments:
- I like that it is black. A dark background is easier on my eyes as I age.
- I like it. It’s eye-catching. You know immediately where to search.
- Dark mode! It’s a good thing. All apps on my phone are in dark mode.
Negative comments:
- I don’t like the colors. Red and black are distracting.
- It's darker than I’m used to. It's a little weird for me.
Do our users use dark mode on their own devices?
Those who answered “sometimes” either toggled it on/off depending on the time of day or used dark mode on their smartphone but not their laptop.
In this study, 88% of participants reported that they used dark mode always or sometimes. That’s significantly more than our web analytics tell us; 38% of our website’s users have dark mode turned on for their operating system.
What’s the experience going from Drupal (dark mode) to another Libraries site that doesn’t have dark mode?
We asked participants to search for Alice in Wonderland from our homepage. Depending on whether they pre-scoped the search by selecting Books & Media or leaving All pre-selected, participants were sent to the Catalog or Quicksearch. Neither of those applications has dark mode at this time. None of the 16 participants commented on the experience going from dark mode to light mode. Based on this, we’ll assume it’s not too jarring to change modes.
Do users who have dark mode turned on in OS actually want our website to be in dark mode? Do they understand why our website is now in “dark mode”?
Yes and yes! It’s a common convention by now. Participants who said they used dark mode on their own devices responded positively to the color scheme on our website.
Are there other needs that dark mode users have that we haven’t uncovered yet?
One participant mentioned that although they prefer dark mode, they would like the option to turn on light mode. We plan to implement a toggle in the future.
How We Did It
Launching a new color scheme was a significant amount of work. Here’s how we implemented and tested dark mode.
Color scheme
We adapted University Communications’ brand colors for a dark palette, balancing the original colors with readability and accessibility. Importantly, we wanted to ensure that there was enough color contrast between light text and dark backgrounds; the text colors all pass WCAG AA color contrast requirements.
Dark mode and CSS
At first, we assumed that we would need to use media queries to implement dark mode in our website’s CSS stylesheets. But instead, we updated all of our stylesheets with the light-dark() function, which allows us to define two colors for an element: one color for light mode and one color for dark mode.
Internal testing
Before launching, the Web Team tested over 80 URLs to ensure we caught any glitches. We reviewed the website with these questions in mind: Does the text pass contrast? Do borders or outlines disappear? Do the new colors give you a headache? Can you distinguish text inputs from other elements? Based on our testing, we adjusted some elements, such as row shading in tables and dimming the hero image in dark mode.
User research
On August 27, 2025, we set up a pop-up table (Tiny Café) in the Ask Us Lobby of the Hill Library. We asked 16 passersby to provide feedback on the Libraries website in dark mode and to complete a few tasks in exchange for a 3D-printed wolf or brick. Based on the positive response, we launched dark mode a week later on September 3, 2025.
Looking ahead
We plan to add a toggle to the Readability Widget so users can switch between light and dark mode on their own without having to rely on their OS settings. Additionally, we’re broaching adding dark mode to other Libraries applications as well.
