Darkmode for Grubhub
Building a darkmode system from the ground upBackground
In September of 2019, Apple launched iOS 13. This new operating system featured an integrated dark mode, which would automatically enable the theme on any app which supported it.
In the months leading up to this release, I was an intern at Grubhub, and as a hackathon project chose to mockup what a potential darkmode system could look like within this app. This project quickly became a long term project which I saw out through my internship and well into my first year of employment. At Grubhub still, darkmode is my passion project and I am proud to be the driving force behind the system.
Goal
The intent behind this project was to get as close as possible to a one-to-one transition from light to dark. Within this system, a designer is not needed to do any extra work to accomodate for a dark user interface, save for extraordinary circumstances.
Accomplishing this required rethinking some of the logic within our existing design ecosystem, as many of the principles used in light mode no longer apply in the dark.
This writeup outlines the logic behind the decisions I made when designing darkmode, as well as some of the future challenges which this project will encounter.
In September of 2019, Apple launched iOS 13. This new operating system featured an integrated dark mode, which would automatically enable the theme on any app which supported it.
In the months leading up to this release, I was an intern at Grubhub, and as a hackathon project chose to mockup what a potential darkmode system could look like within this app. This project quickly became a long term project which I saw out through my internship and well into my first year of employment. At Grubhub still, darkmode is my passion project and I am proud to be the driving force behind the system.
Goal
The intent behind this project was to get as close as possible to a one-to-one transition from light to dark. Within this system, a designer is not needed to do any extra work to accomodate for a dark user interface, save for extraordinary circumstances.
Accomplishing this required rethinking some of the logic within our existing design ecosystem, as many of the principles used in light mode no longer apply in the dark.
This writeup outlines the logic behind the decisions I made when designing darkmode, as well as some of the future challenges which this project will encounter.
Research
Darkmode is of significant benefit to a variety of different users within the Grubhub ecosystem. In July of 2019, Grubhub delivered well over 1.5 million orders between the hours of 8pm and 6am.
Supporting darkmode is of significant benefit to the couriers who deliver these orders. Around 87% of couriers who work for Grubhub work at night. For these workers, Darkmode is not just a luxury item, but a safety feature as they drive in the dark.
Challenges
This project did not just require the creation of a dark UI for Grubhub, but rather a new set of rules by which the logic from lightmode can be moved into the dark. This means that some of the decisions we had previously made, in terms of layout, depth, and colour, would not be ideal for a dark interface.
For example, shadows posed an issue. Our current method of displaying depth, showing a dark shadow on top of a lighter background, is limited to a light user interface. Additionally, passing accessibility proved to be a major issue, as contrast drops severely when backgrounds are chagned from a flat white to a darker blue or grey.
Darkmode is of significant benefit to a variety of different users within the Grubhub ecosystem. In July of 2019, Grubhub delivered well over 1.5 million orders between the hours of 8pm and 6am.
Supporting darkmode is of significant benefit to the couriers who deliver these orders. Around 87% of couriers who work for Grubhub work at night. For these workers, Darkmode is not just a luxury item, but a safety feature as they drive in the dark.
This project did not just require the creation of a dark UI for Grubhub, but rather a new set of rules by which the logic from lightmode can be moved into the dark. This means that some of the decisions we had previously made, in terms of layout, depth, and colour, would not be ideal for a dark interface.
For example, shadows posed an issue. Our current method of displaying depth, showing a dark shadow on top of a lighter background, is limited to a light user interface. Additionally, passing accessibility proved to be a major issue, as contrast drops severely when backgrounds are chagned from a flat white to a darker blue or grey.
Background and Foreground Logic
In light mode, background and foreground are represented through a ‘Tinted’ and ‘Untinted’ background colour. ‘Tinted’ serves as a secondary color, dark grey, while ‘Untinted’ is the primary background, white.
In dark mode, this logic is flipped. Untinted is now the darker color, black, while tinted is lighter, dark purple.
Dimension
As mentioned earlier, dimension is displayed through the use of shadows in light mode. As these shadows can not be picked up over a dark background, a new system was needed. The method for displaying dimension in dark mode is: opacity of stroke.
In this system, as an object moves ‘closer’ to the user, the opacity increases. This gives the impression of the layer being more prominent, and higher up on the screen.
In light mode, background and foreground are represented through a ‘Tinted’ and ‘Untinted’ background colour. ‘Tinted’ serves as a secondary color, dark grey, while ‘Untinted’ is the primary background, white.
In dark mode, this logic is flipped. Untinted is now the darker color, black, while tinted is lighter, dark purple.
Dimension
As mentioned earlier, dimension is displayed through the use of shadows in light mode. As these shadows can not be picked up over a dark background, a new system was needed. The method for displaying dimension in dark mode is: opacity of stroke.
In this system, as an object moves ‘closer’ to the user, the opacity increases. This gives the impression of the layer being more prominent, and higher up on the screen.
Colour
When moving from light to dark, the majority of colours have to be altered. The rare exception to this are brand colors, which will not be changed for obvious reasons. Luckily, the existing brand red passes accessibility on all backdrops.
The process for creating a dark adaptation of every other colour was slow. I was not able to simply add white to the existing colour until it met accessibility, as the app quickly began to look washed out and ‘chalky’ this way.
As such, most new hex values were hand picked to retain the saturated look of light mode while working in the dark.
Takeaways
Working on Grubhub+ taught me a number of valuable lessons, specifically within the world of systems design. I grew accustomed to thinking of my work as being part of a larger ecosystem, and working out just how every change will impact all other parts of the app.
Additonally, two years on from when this project began, I am still the go-to person for any question Dark Mode related. Having this sense of ownership over a specific domain has allowed me the opportunity to have say over decisons that I may otherwise not have had so early on in my career.
When moving from light to dark, the majority of colours have to be altered. The rare exception to this are brand colors, which will not be changed for obvious reasons. Luckily, the existing brand red passes accessibility on all backdrops.
The process for creating a dark adaptation of every other colour was slow. I was not able to simply add white to the existing colour until it met accessibility, as the app quickly began to look washed out and ‘chalky’ this way.
As such, most new hex values were hand picked to retain the saturated look of light mode while working in the dark.
Takeaways
Working on Grubhub+ taught me a number of valuable lessons, specifically within the world of systems design. I grew accustomed to thinking of my work as being part of a larger ecosystem, and working out just how every change will impact all other parts of the app.
Additonally, two years on from when this project began, I am still the go-to person for any question Dark Mode related. Having this sense of ownership over a specific domain has allowed me the opportunity to have say over decisons that I may otherwise not have had so early on in my career.
