Introduction
Dark mode, also known as night mode, is an alternative way of viewing content on a webpage. Rather than having dark text on a light background, dark mode displays light text on a dark background. There are a variety of reasons for introducing a dark mode to users, including accessibility, aesthetic preferences, and reduced energy consumption.
In fall 2022, the Indiana University–Purdue University Indianapolis (IUPUI) University Library launched a dark mode as an option for web users. We present some considerations for implementation and design for those interested in adding a dark mode to their website.
Color Scheme Design
Designing the dark mode for the website was a challenging exercise. There are several factors to consider when designing a dark mode: you need to understand how lightness in a dark mode simulates depth to a user, that saturated colors can cause unintended problems, and how the site will meet accessibility guidelines. You may also need to stay within your institution’s color scheme and their approved list of colors, as we did. This is all on top of trying to craft an aesthetically pleasing site for your users to navigate.
To design the dark mode, we started by opening a wireframe we had created in Adobe XD that had been the blueprint for the website’s homepage and several layers down. Having this already allowed us to quickly modify the various elements on the webpage and test the existing colors with varying backgrounds. If you don’t have a wireframe already, we recommend taking the time to recreate the main website elements in a wireframing tool such as Figma or Adobe XD to allow for this kind of fast, iterative experimentation.
While designing your dark mode version, keep in mind that lighter shades of gray on the webpage will draw the eye. This implies depth to users, meaning that they will “see” that the content in lighter boxes is sitting on top of their darker counterparts. This can be advantageous, as it allows for communicating to the user what you consider important to their experience on the library website. Similarly to how we may assign certain colors to delineate different types of content, we can do the same thing with depth: imply structure to the user that may not be easy to convey with only words.
While your primary work in dark mode should focus on shades of gray, you can still use color to call attention to important landmarks on your webpage. Color can be tricky to get right in a dark mode, as colors that are too bland will not stand out and may be unappealing, but colors that are too bright or saturated can distract too much or even cause the objects to appear to shake or vibrate for some users. If you find this happening on your website, we recommend trying to desaturate the base color to eliminate the vibration or experimenting with different colors if possible.
As always, it is imperative that your website continues to be accessible. For us, in many ways this was easy to do, as the light (not completely white) text stood out appropriately against the dark background, but we needed to test our text color with every shade of gray that we used on the website. We also had to continue using official, university-approved colors. This severely limited our palette for emphasis colors, as the university only has eight primary and secondary colors approved for web use, and three of those were too saturated to use in dark mode. We experimented in our wireframe until we got the colors just right and deployed in appropriate locations across the website.
Even if you are not planning to implement a dark mode option, experimenting with one in a wireframe can act as a good exercise when designing a website. A dark mode tends to look starker and emptier, so it can give you a better sense of the way space is used on your website.
Mode-Selection Methods
To enable our dark mode, we used two different detection strategies. The first strategy allows the user to determine in which mode they view the website. Our Room Reservation application (https://rooms.ulib.iupui.edu) employs this user-selected method, which requires web cookies and a little bit of code placed in the head section of the page. The code checks for an existing cookie holding a color mode preference. If one is found, the class attached to the <html> tag is updated.
<script>
let color_cookie = “color-mode=“;
let cookies = document.cookie.split(‘;’);
for(let i = 0; i < cookies.length; i++) {
let c = cookies[i];
while (c.charAt(0) == ‘ ‘) {
c = c.substring(1);
}
if (c.indexOf(color_cookie) == 0) {
color_mode = c.substring(color_cookie.length, c.length) + “_mode”;
document.querySelector(“html”).classList.remove(“default_mode”);
document.querySelector(“html”).classList.add(color_mode);
}
}
</script>
A sidebar block on the page allows users to select dark mode, light mode, or system preference. Upon selection, the <html> class is updated, and a new or updated cookie is stored. We set the expiration of this cookie for 180 days.
The second detection strategy relies on the user’s system settings. On our library website (https://ulib.iupui.edu), created with Drupal, we employ a simple CSS trick to determine which color mode a user sees. Using the media query select feature, which is supported by all modern browsers, we ask for the current browser’s preferred color scheme. If the answer is dark, we know our user would like to see the website’s dark mode. Inside this media query, several background colors, background images, and font colors are then either overwritten or added.
@media (prefers-color-scheme: dark){
body{
background-color: @dark-body;
}
}
More CSS Tricks and Tips
Notice @dark-body in the above code? Our Drupal theme takes advantage of Leaner Style Sheets (LESS), so we can use variables and multiple files to easily generate the theme’s single, rather large style.css file. In fact, all our dark mode styles reside in just one easy-to-edit file, which makes going from prototype to production a much simpler task.
Our dark mode also uses CSS image sprites. An image sprite holds multiple images in a single file. To get to a specific image in that file, offsets and sizes are set in CSS. We use image sprites to get the same icons for both light and dark modes, only in different colors, by offsetting an image’s background.
@media (prefers-color-scheme: dark){
#triblock-news {
background-position: 0 160px;
}
}
Our footer takes advantage of another CSS color trick, this time using a scalable vector graphic (SVG) image. By changing the image’s fill property, we can use the same image, only rendered in a different color, within the dark mode.
@media (prefers-color-scheme: dark){
#iu-footer {
.cls-2 {
fill: @iu-colors-crimson !important;
}
}
}
Overall, these CSS tricks and methods are easy to work with, making the addition of a dark mode version of our website achievable and scalable. With very few modifications, we were able to pass along our dark mode color scheme to our other websites, such as our LibGuides instance and smaller sites for library departments.
Results
We tested the dark mode of the website with library personnel. We conducted the first round of testing to ensure that the website was still readable and that the colors were not over-saturated. In addition, we showed the wireframe to students studying in the library to gauge their reactions and preferences for the design.
Currently, the system delivers a version of the website based on the user’s system settings at the device or browser level. The dark mode version of the website is used by 21.6 percent of our users.
At first, adding a dark mode to our library website seemed a daunting task. But once we discovered the CSS tricks above, the task became easily manageable and turned out to be an enjoyable project, from both the design and development perspectives. This led to a natural expansion of offering a dark mode to other parts of the library experience, such as LibGuides and our room reservation system.
Future Plans and Conclusion
As part of a design refresh, we are adding the color mode selection tool, currently available only on our Room Reservation application, to our library website, and perhaps finding a way to share this preference to our other systems. Offering color mode selection to our users puts them in control and recognizes that even if they generally want a certain mode by default, they may prefer one over the other in the library’s case. It also provides greater flexibility for users with accessibility concerns. We also plan to do a more systematic review of dark mode usage through tracking codes and color mode selection clicks.
Another interesting question we hope to explore is the relationship between color mode preference and viewing devices. Given that the Room Reservation application is more likely to be viewed on a mobile device, does this affect user preference? Once we have comparable user-selectable color-mode options, collecting data to explore this question will be possible.
Overall, the IUPUI University Library is pleased with the dark mode option and its use. We encourage anyone curious in trying a dark mode to do so, even if it only becomes an internal design exercise.
