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
![](https://framerusercontent.com/images/gQpwfv5tCRpYhIjTyfd86qyH1CQ.png)
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
![](https://framerusercontent.com/images/yjXHN0r4vGQ80QjKuTsqUUo.png)
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.
![](https://framerusercontent.com/images/vnxQ3tEuuxveFHd6dJEI4iEJFAA.png)
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
![](https://framerusercontent.com/images/gQpwfv5tCRpYhIjTyfd86qyH1CQ.png)
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
![](https://framerusercontent.com/images/yjXHN0r4vGQ80QjKuTsqUUo.png)
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.
![](https://framerusercontent.com/images/vnxQ3tEuuxveFHd6dJEI4iEJFAA.png)
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
![](https://framerusercontent.com/images/gQpwfv5tCRpYhIjTyfd86qyH1CQ.png)
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
![](https://framerusercontent.com/images/yjXHN0r4vGQ80QjKuTsqUUo.png)
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.
![](https://framerusercontent.com/images/vnxQ3tEuuxveFHd6dJEI4iEJFAA.png)