Dark Theme for Coinbase

For the night-owl cryptocurrency enthusiasts like myself, light mode discourages my nighttime usage, and I find myself using other apps such as Binance in the wee hours of the night.

Additionally, now that I’ve rebuilt some Coinbase screens in Figma, I’ll be more tempted to jump into high-fidelity designs for some of my more impactful ideas for the app.

Home Tab / Watchlist

In terms of HSL color model, the Dark Mode is based on Twitter’s saturation (S) and lightness (L) levels, while the hue (H) value has been rotated to match that of the Coinbase Blue, which has a Hue value of 227º.

“Lights Out” uses a black background which more closely resembles the dark themes of iOS. While the Soft Dark Mode is closer (in terms of lightness) to macOS dark themes.

Notifications Page

Small Details

The deep Coinbase blue works nicely for light mode active tab states, but as you can see below, it becomes unreadable with darker backgrounds. To improve contrast and readability (especially for users who are hard of sight) I’ve made the active state white.

As previously mentioned, these themes are inspired by Twitter, yet Twitter did not have to alter the active state color of their tabs, because the Twitter blue has a much higher lightness value than that of Coinbase.

An interesting observation: When opening an article in Coinbase it automatically opens the reader view with the dark theme enabled. So all we need to do is update the rest of the app to match.