[ TECH ] Google's Dark Theme Guidance for Material Design

Dinesh Vishwakarma

[div align="center"][a href="https://c.mi.com/forum.php?mod=viewthread&tid=2143219&aid=4203956&from=album&page=1"][img id="aimg_4203956" width="776" height="387" src="https://u01.appmifile.com/images/2019/05/08/3879d5ec-f014-462c-b877-a052282f3a54.jpeg" alt="images.jpeg" title="images.jpeg"][/a][/div][div align="left"][div align="left"][br][/div][div align="left"]During the I/O keynote, Google has finally made Dark Theme for Android 10 Q official. We've seen that change coming, but thus far, we didn't receive a word on the best practices for implementing dark themes in apps. This has changed now, as Google updated the Material Design guidelines with information on this.[br][/div][div align="center"][br][/div][div align="left"]Let's start with what interests many of you the most: No, Google doesn't encourage the usage of pure black but instead recommends using gray – different shades of gray for varying levels of elevation within views that is.[/div][div align="left"]The company justifies this with readability and accessibility reasons and writes: "Dark gray surfaces can express a wider range of color, elevation, and depth, because it’s easier to see shadows on gray (instead of black).[/div][br][div align="left"]Dark gray surfaces also reduce eye strain, as light text on a dark gray surface has less contrast than light text on a black surface." This is in line with previous research and known design paradigms, and the fact that you shouldn't use slightly transparent typography over 100 percent white helps with eye strain as well.[br][br][/div][div align="center"][a href="https://c.mi.com/forum.php?mod=viewthread&tid=2143219&aid=4203977&from=album&page=1"][img id="aimg_4203977" width="768" height="768" src="https://u01.appmifile.com/images/2019/05/08/b42ce069-b84f-4563-bf57-157f025d67a7.png" alt="mio-design_assets_1d89p5411vfAZDCJvhf5WlgVE1TVgkTQY_darktheme-adjustedcolor-seco.png" title="mio-design_assets_1d89p5411vfAZDCJvhf5WlgVE1TVgkTQY_darktheme-adjustedcolor-seco.png"][/a][/div][div align="center"][div align="left"][div align="center"]An example on how to find the perfect colors in an app and how they should be used in views[/div][/div][/div][br][div align="left"]Naturally, colors should be used sparingly in dark mode as not to make it obsolete. Thus, primary and secondary colors should be pastels and not saturated, since that wouldn't play nice with readability on dark backgrounds. Brand colors are excepted from this rule, although logos and such should be used sparingly in the first place. Only small interface elements should be colored in the first place, and developers should be careful about painting huge areas as not to emit too much brightness.[br][br][/div][div align="left"]While you can technically set your device to dark theme the moment you take it out of the box or update to Android Q and never look back, Google says that the White Theme remains the default that should be supported by all apps. Of course, per guidelines, you should always be able to opt specific apps out of or into dark mode through a switch within apps' settings.[/div][br][div align="center"][a href="https://c.mi.com/forum.php?mod=viewthread&tid=2143219&aid=4203978&from=album&page=1"][img id="aimg_4203978" width="774" height="480" src="https://u01.appmifile.com/images/2019/05/08/482bf780-92fa-4f2b-8ac7-52e9ebfce462.png" alt="Screenshot-2019-05-08-at-11.26.24.png" title="Screenshot-2019-05-08-at-11.26.24.png"][/a][/div][br][div align="left"]For the most part, the recently updated Google apps follow these guidelines. There are some older parts of Google News that are completely black, but these seem to stem from the days when the app still was Play News Stand. Backgrounds in Google Photo's picture viewer are completely black, too, but that has always been the case.[br][br][br][a href="https://www.androidpolice.com/2019/05/08/google-shares-dark-theme-guidance-for-material-design/" target="_blank"]Source[/a][/div][/div]

irfan_kolkata

Good share bro but same post

Dinesh Vishwakarma

Which bro?