Tweet
WhatsApp dark mode is nearly here, having now arrived for beta testing on both iOS and Android, but personally I think it could use a little tweaking, which got me thinking about dark modes in general. What makes a truly good one, and which apps get it right
Give us a choice
Googleâs Material Design guidelines for dark themes recommend avoiding pure black as a background color to make the contrast between interface elements less stark, but many users actually prefer their apps to be as black as possible. This is particularly true of OLED phone owners, as OLED panels simply switch off any pixels that need to be rendered as black, helping save a little extra juice.
That said, many people will agree with Googleâs suggestion that dark gray is a safer choice, so giving users the option to choose between two variations is a good choice.
This is something Twitter achieves well, giving users the option to choose between âDimâ and âLights outâ modes depending on their own preferences. Assets found in earlier beta version of of WhatsApp suggested it might offer a similar choice, but that hasnât come to pass.
[IMG alt=âTwitterâ]http://cdn.mos.cms.futurecdn.net/W93...SNH79afToG.jpg
Twitter offers a choice of two dark modes: âDimâ and âLights Outâ
Consider contrast
If your light interface uses gray boxes or buttons on a white background, aim for the same degree of contrast with your dark mode to avoid confusing regular users.
One issue with WhatsAppâs new dark mode is that the speech bubbles for conversations are nearly the same shade as the wallpaper, reducing the illusion of depth and making them much trickier to see than they are if you pick the lighter interface.
This is another area where Twitter excels, keeping roughly the same color variance between areas, though its choice of accent colors brings us to our next point.
[IMG alt=âWhatsApp dark modeâ]http://cdn.mos.cms.futurecdn.net/cCj...irWWfEZsjv.jpg
WhatsAppâs speech bubbles are very similar to the background color in dark mode, making the flow of conversation less clear
Remember saturation
Used against white backgrounds, saturated yellows, reds and greens look fresh and appealing. Against a darker backdrop, however, they can be hard on the eyes, seeming to âvibrateâ on the screen
While much of WhatsAppâs new dark mode uses mellow shades of gray and blue, your friendsâ names are still rendered in gaudy shades, and the emoji menu is a dazzling array of yellow icons. Toning these shades down a few notches would have taken extra work, but would have made the app more pleasant to use.
Likewise, Twitterâs vibrant accent colors look great against white but are too harsh against darker backgrounds.
[IMG alt=âWhatsApp dark mode emojiâ]http://cdn.mos.cms.futurecdn.net/ejG...uoqjmCS9AT.jpg
WhatsAppâs bright yellow emoji and usernames âvibrateâ against the dark background
Allow customization
You wonât be able to satisfy everyone, so if possible, a degree of customization will allow users to tailor your app to suit their preferences. Gmail for desktop lets you choose from Googleâs own light and dark modes, but also offers a wealth of other color options that you can use with your own background image.
[IMG alt=âGmail offers far more than just light and dark modes, and you can customize your inbox with your own background tooâ]http://cdn.mos.cms.futurecdn.net/hbq...SJsT2HcFDB.jpg
Make it easy to find
Finally, once youâve perfected your dark mode, donât tuck the option away! Most developers place the option to go dark in a fairly obvious place and allow you to activate it by toggling a switch, but Firefox for desktop is an unusual exception.
To change the browserâs color scheme, you need to open the menu and select âCustomizationâ (so far, so obvious) then use a tiny drop-down menu right at the bottom of the screen, which is otherwise entirely devoted to customizing toolbars. Itâs a shame, because Firefox was one of the first browsers to feature a proper dark mode, and itâs a good-looking one (if you can find it).
[IMG alt=âFirefox dark modeâ]http://cdn.mos.cms.futurecdn.net/dHg...StoiGAd8rU.jpg
Firefoxâs dark mode is hidden away in a page devoted to customizing toolbar icons
[ul]
[li]How to enable dark mode for Facebook[/li][/ul]
Continue readingâŚ[/IMG]
Give us a choice
Googleâs Material Design guidelines for dark themes recommend avoiding pure black as a background color to make the contrast between interface elements less stark, but many users actually prefer their apps to be as black as possible. This is particularly true of OLED phone owners, as OLED panels simply switch off any pixels that need to be rendered as black, helping save a little extra juice.
That said, many people will agree with Googleâs suggestion that dark gray is a safer choice, so giving users the option to choose between two variations is a good choice.
This is something Twitter achieves well, giving users the option to choose between âDimâ and âLights outâ modes depending on their own preferences. Assets found in earlier beta version of of WhatsApp suggested it might offer a similar choice, but that hasnât come to pass.
[IMG alt=âTwitterâ]http://cdn.mos.cms.futurecdn.net/W93...SNH79afToG.jpg
Twitter offers a choice of two dark modes: âDimâ and âLights Outâ
Consider contrast
If your light interface uses gray boxes or buttons on a white background, aim for the same degree of contrast with your dark mode to avoid confusing regular users.
One issue with WhatsAppâs new dark mode is that the speech bubbles for conversations are nearly the same shade as the wallpaper, reducing the illusion of depth and making them much trickier to see than they are if you pick the lighter interface.
This is another area where Twitter excels, keeping roughly the same color variance between areas, though its choice of accent colors brings us to our next point.
[IMG alt=âWhatsApp dark modeâ]http://cdn.mos.cms.futurecdn.net/cCj...irWWfEZsjv.jpg
WhatsAppâs speech bubbles are very similar to the background color in dark mode, making the flow of conversation less clear
Remember saturation
Used against white backgrounds, saturated yellows, reds and greens look fresh and appealing. Against a darker backdrop, however, they can be hard on the eyes, seeming to âvibrateâ on the screen
While much of WhatsAppâs new dark mode uses mellow shades of gray and blue, your friendsâ names are still rendered in gaudy shades, and the emoji menu is a dazzling array of yellow icons. Toning these shades down a few notches would have taken extra work, but would have made the app more pleasant to use.
Likewise, Twitterâs vibrant accent colors look great against white but are too harsh against darker backgrounds.
[IMG alt=âWhatsApp dark mode emojiâ]http://cdn.mos.cms.futurecdn.net/ejG...uoqjmCS9AT.jpg
WhatsAppâs bright yellow emoji and usernames âvibrateâ against the dark background
Allow customization
You wonât be able to satisfy everyone, so if possible, a degree of customization will allow users to tailor your app to suit their preferences. Gmail for desktop lets you choose from Googleâs own light and dark modes, but also offers a wealth of other color options that you can use with your own background image.
[IMG alt=âGmail offers far more than just light and dark modes, and you can customize your inbox with your own background tooâ]http://cdn.mos.cms.futurecdn.net/hbq...SJsT2HcFDB.jpg
Make it easy to find
Finally, once youâve perfected your dark mode, donât tuck the option away! Most developers place the option to go dark in a fairly obvious place and allow you to activate it by toggling a switch, but Firefox for desktop is an unusual exception.
To change the browserâs color scheme, you need to open the menu and select âCustomizationâ (so far, so obvious) then use a tiny drop-down menu right at the bottom of the screen, which is otherwise entirely devoted to customizing toolbars. Itâs a shame, because Firefox was one of the first browsers to feature a proper dark mode, and itâs a good-looking one (if you can find it).
[IMG alt=âFirefox dark modeâ]http://cdn.mos.cms.futurecdn.net/dHg...StoiGAd8rU.jpg
Firefoxâs dark mode is hidden away in a page devoted to customizing toolbar icons
[ul]
[li]How to enable dark mode for Facebook[/li][/ul]
Continue readingâŚ[/IMG]