Recommended
More Related Content
Similar to Handling Dark Mode on Android and iOS
Similar to Handling Dark Mode on Android and iOS (20)
More from Mike Wolfson
More from Mike Wolfson (20)
Recently uploaded
Recently uploaded (20)
Handling Dark Mode on Android and iOS
- 1. Handling Dark Mode in Android and iOS GDG Twin Cities July 14, 2018 Mike Wolfson Mark Randall
- 2. Handling Dark Mode in Android and iOS GDG Twin Cities July 14, 2018 Mike Wolfson Mark Randall
- 4. “ (Material) A low-light UI that uses majority of dark surfaces and uses color as an accent throughout 4 https://material.io/design/color/dark-theme.html
- 5. Material DarkMode Place your screenshot here 5 A low-light UI that uses majority of dark surfaces and uses color as an accent throughout
- 6. “ (Apple HIG) In Dark Mode, the system adopts a darker color palette for all windows, views, menus, and controls. The system also uses more vibrancy to make foreground content stand out against the darker backgrounds. 6 https://developer.apple.com/design/human-interface-guidelines/ios/ visual-design/dark-mode/
- 7. Place your screenshot here 7 Apple HIG Dark Mode (Apple HIG) In Dark Mode, the system adopts a darker color palette for all windows, views, menus, and controls. The system also uses more vibrancy to make foreground content stand out against the darker backgrounds.
- 8. Why Use Dark Mode? Better For Your Health Native OS Support Battery Savings 8 Accessibility Reduced Eye Strain It is Stylish!
- 9. Behavior Android User selects Mode: ￮ Dark ￮ Light ￮ System 9 iOS People can choose Dark Mode as their default interface style, and they can use Settings to make their devices automatically switch to Dark Mode when ambient light is low.
- 11. Principles 11 Enhance accessibility Accommodate regular dark theme users (such as those with low vision), by meeting accessibility color contrast standards. Conserve energy In products that require efficiency (such as devices with OLED screens), conserve battery life by reducing the use of light pixels. Darken with grey Use dark grey – rather than black – to express elevation and space in an environment with a wider range of depth. Color with accents Apply limited color accents in dark theme UIs, so the majority of space is dedicated to dark surfaces.
- 12. Conserve Energy “In products that require efficiency (such as devices with OLED screens), conserve battery life by reducing the use of light pixels.” 12
- 13. Darken With Grey “Use dark grey – rather than black – to express elevation and space in an environment with a wider range of depth.” 13
- 14. 14 Shadow Grows as Material gains Elevation
- 15. 15 Dark Mode: As a surface raises in elevation, it becomes lighter in color
- 16. 16
- 17. Enhance Accessibility “Accommodate regular dark theme users (such as those with low vision), by meeting accessibility color contrast standards.” 17
- 18. Minimum Contrast Requirements Ensure you are meeting the minimum standards, to ensure your content is legible: WCAG - 4.5 : 1 HIG - 7 : 1 Material - 15.8 : 1 * The material ratio is large to account for the changes in surface color due to elevation changes 18
- 20. 20 CONTRAST
- 24. Color With Accents “Apply limited color accents in dark theme UIs, so the majority of space is dedicated to dark surfaces.” 24
- 25. What about iOS? iOS 13 will introduce dark mode. macOS 10.14 introduced it in 2018. 25
- 26. Similarities
- 27. Users will increasingly expect your app to support dark mode ￮ iOS 13 will be released in September 2019. Adoption will be rapid. Potentially as high as 75% by EOY if history holds. (Not yet an App Store requirement.) ￮ Android Q will release in August 2019. ￮ iOS will not support force dark. 27
- 28. Semantic color ￮ Both platforms lean into thinking about color semantically. ￮ What is the purpose of a color rather than specific hex values. 28
- 29. Both platforms provide support for semantic colors ￮ iOS with UIKit system colors ￮ Android with Material Components and AppCompat ￮ Both platforms recommend using system colors when possible. 29
- 30. 30 30 Semantic colors go beyond light and dark mode ￮ Color is determined by more variables the system’s dark/light appearance. ￮ Elevation and a11y appearance settings also influence system colors values. Color Whitelight dark Black Elevation 1 Elevation 0 Dark Gray
- 31. Support for custom colors ￮ Both platform support custom colors which can have differing light and dark hex and alpha values. ￮ Single hex can also be used across dark and light modes. Such as for brand colors. 31
- 32. Depth ￮ Both platforms provide direction on how depth should be visually communicated. ￮ Depth visually differs between dark and light mode. 32
- 33. 33
- 34. Differences
- 35. App vs OS appearance ￮ Google suggests allowing users to override system level appearance setting ￮ Apple is leaning into 3rd party apps looking like and feeling like part of the the platform 35
- 36. iOS Materials ￮ Apple introduced materials for iOS 13. ￮ Materials have light and dark mode variants. ￮ Differs from Material Design by using translucency 36 “… materials (or blur effects) that create a translucent effect you can use to evoke a sense of depth. The effect of a material lets views and controls hint at background content without distracting from foreground content. ...” - iOS HIG
- 37. 37 Dark Light
- 38. 38 Dark
- 39. Variant icons ￮ Apple puts emphasis on stroke width of icons differentiating between dark and light modes. Increasing the width for dark mode. ￮ Apple has its own icon library. SF symbols supports variable stroke width out of the box. 39 TODO: verify this is a difference
- 40. 40
- 41. ≈ Thinking cross platform ￮ Valuable to find a cross platform way to thinking about color and depth. ￮ Thinking semantically in a way which translates to both Android and iOS UI systems. 41
- 43. Force Dark Mode 43 <style name="Base.Theme.DesignDemo" parent="Theme.MaterialComponents.Light.NoActionBar"> <item name="android:forceDarkAllowed" tools:targetApi="q">true</item> System calculates changes and applies them automatically at run-time. ● Only Works With Q ● No control - system makes all choices
- 44. Force Dark Mode 44 <LinearLayout ... android:forceDarkAllowed="true" ...> Can also apply it to just a single Layout
- 45. Force Dark Mode - results 45
- 46. Force Dark Mode - results 46
- 47. Implement DayNight Theme 47 Step 1: Use the Material Themes and Styles Correctly <style name="Base.Theme.DesignDemo" parent="@style/Theme.MaterialComponents.DayNight.NoActionBar"> ... </style> Step 2: Leverage existing DayNight theme - Support back to API 14
- 48. Use Night Qualifier for custom colors 48
- 49. Implement DayNight Theme 49 Step 1: Use the Material Themes and Styles Correctly
- 50. Implement DayNight Theme 50 Step 1: Use the Material Themes and Styles Correctly app:chipStrokeColor="@color/black" app:chipStrokeColor="@color/color_on_primary" app:chipStrokeColor="?attr/colorOnPrimary" NO! NO! YES Make sure to use the Material defined attributes
- 51. Provide Desaturated Colors for Night Mode 51
- 52. Android Studio Has a tool to modify colors 52 Hint:
- 53. Material Semantic Colors 53 colorPrimary colorPrimaryDark colorOnPrimary colorSurface colorOnSurface colorSurface (with elevation) colorSecondary colorOnSecondary colorError colorOnError
- 55. Slide Credits Special thanks to all the people who made and released these awesome resources for free: ￮ Presentation template by SlidesCarnival - Cymbeline ￮ Photographs by Unsplash 55
- 56. 56 Thanks for your time! https://www.nerdery.com/careers @nerdery @mikewolfson