Amazon Dark Mode
In researching why many online retail apps don’t feature any sort of dark mode for your late night impulse buys, I discovered one of the bigger hurdles seems to be the idea of color contrast with product images. I figured that Amazon, the worlds largest retailer, would have invested some time and energy to make their app a bit more accessible to their night time shoppers.
Checking through the app settings and searching around forums online seemed to tell the story that the feature didn’t exist yet. It may not exist but according to App Store reviews, it was in demand. Thus, my journey to try and design this feature began.
Color Palette Philosophy
The Needs/Goals
Lets briefly start by taking a quick look at the home screen as it exists within the app. Notably we can see that theres a gradient that extends from the top of the screen down, we have some opaque whites in the chips, and a lot of bright white. It’s a very bright and stark design that works during the daytime but can be quite blinding at night or in low light settings.
The core pillars of designing dark mode were creating a feeling of warmth while still having the proper color contrast for accessibility. This was especially important given that product images would still need to have some level of white background so that both darker and lighter product colors would stand out. Additionally, those home screen gradients needed to feel like they were still there and maintained their color identity. So I had to fold them into the mold while maintaining their hue but lessening their brightness.
The Problems I Ran Into
The first problem was that I realized in copying Amazons screen flows that they use a couple different mid tones for their stroke colors. In exploring why this may be the case it seemed to be so it wouldn’t draw the eye too much towards borders of objects but was just visible enough to delineate the start and end of a particular on screen component. I quickly realized that my dark mode would appropriate that philosophy for the sake of homogeny between modes. I would need to do that and keep things appropriately contrasted.
Problem 1:
Thus I went to work figuring out how to create one more tone that was somewhere in the middle of the others. I dove back into doing research on other apps, industry standards, and also seeing if I could create something on my own. Eventually I landed on using my own color. I took my lightest value and adjusted its place in the color picker so that it was a little darker and had a touch more of its hue color for some warmth.
Solution:
The blue tone that gets added and changed between versions was the color tone I used for any links/blue text buttons. The original color didn’t quite capture the blue essence of the original color that Amazon uses, so I shifted to a different shade and hue of blue. This version was more based off the original hue that they used.
Additional Notes:
A problem I ran into in designing the color scheme for the home page was the gradient that sits behind the search bar header and extends through a portion of the screen, but then disappears as you scroll past. As far as the color scheme was concerned I first tested the original gradient on the page but changed the bottom color to be the same black as the background. This seemed to work and looked cool but didn’t quite match what I had already done with the large feature cards. I had darkened their tones quite a bit and realized here that hue of the first card almost matched the starting hue of the gradient in light mode.
Problem 2:
Now realizing this, I chose to shift the first gradient hex code to be a touch darker than that of the feature card. This allows it to still stand out but keep the screen fairly dark as well. It lined up with the way the original was designed and matched up with my pillars of contrast and warmth while keeping some color in the app as well.
Solution:
A secondary problem to this one was figuring out how to get the gradient to appear in the same fashion as the original where it both disappears when you scroll past and that it comes down to the correct spot on the page and stops. Alongside this was getting the proper fill and blur for the search header.
V1: I tried having the whole screen frame have the linear gradient and having the end of that fill sit just above the sponsored ad component. I also gave the search header a default level of background blur and a 40% opacity of an off-black color. This resulted in a gradient that is always present at the top of the screen and a blur that barely blurred anything at all.
Problem 2A:
V1
V2: I then tried two things that came to mind:
1) Increase the blur from 4 to 100 to see how much that helps or if its too much
2) Lower the opacity from 40% on the off-black fill to 1% to see how much more the gradient comes through it for the sake of seamlessness
These proved to be helpful, but the gradient was still locked to the top of the page. However, this did solve the search header blur issue. It now gave off the frosted glass vibe when items scrolled behind it and the gradient showed through it much better. I still hadn’t reached a proper solution to this problem until…
V2
I realized I didn’t need the whole frame to be a gradient. I could just create a container that sat at the top of the page behind all the other elements that held the chips and feature cards. This way the container would naturally end where I needed it to and the gradient would scroll with everything else. This in conjunction with having already solved the blur problem meant everything was now working properly!
Solution:
Final
A problem I ran into in designing dark mode for the orders page that I felt as though there needed to be some level of contrast between the list items and the background just so they would stand out a little bit more and be more easily delineated. Related to that was the idea that things should still feel relatively homogenous with the light version as well.
V1 of this had lighter component colors and a lighter background color to contrast it all. I didn’t think this looked great nor did it have the right amount of contrast and darkness to it. The contrast and brightness didn’t quite add up visually and it didn’t feel as in line with the light version.
Problem 3:
V2 had darker components on the screen to contrast the background more and be more homogenized between the colors and contrast of the light version. I felt this was a solid step in the right direction but something still felt off. I kept feeling like the background was too bright somehow…
The final iteration darkened the background to the off-black color in my palette and this immediately struck me as closer to what I felt was the proper inversion of color tones from the original. I took a bit of time as well to compare hex values between the two white tones of the original and the two black tones I was using. They were in the same ballpark as one another and it looked better too.
Solution:
Okay but what about some of the other screens within the app?
Search Results
Product Page