Handling Dark Mode on Android and iOS
- 1. Handling Dark Mode in Android and iOS Mike Wolfson @mikewolfson
- 2. Handling Dark Mode in Android and iOS Mike Wolfson @mikewolfson
- 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 @mikewolfson
- 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 @mikewolfson
- 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/ @mikewolfson
- 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. @mikewolfson
- 8. Why Use Dark Mode? Better For Your Health Native OS Support Battery Savings 8 Accessibility Reduced Eye Strain It is Stylish! @mikewolfson
- 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. @mikewolfson
- 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 ¨C rather than black ¨C 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. @mikewolfson
- 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 @mikewolfson
- 13. Darken With Grey ¡°Use dark grey ¨C rather than black ¨C to express elevation and space in an environment with a wider range of depth.¡± 13 @mikewolfson
- 14. 14 Shadow Grows as Material gains Elevation @mikewolfson
- 15. 15 Dark Mode: As a surface raises in elevation, it becomes lighter in color
- 16. 16 @mikewolfson
- 17. Enhance Accessibility ¡°Accommodate regular dark theme users (such as those with low vision), by meeting accessibility color contrast standards.¡± 17 @mikewolfson
- 18. Minimum Contrast Requirements Ensure you are meeting the minimum standards, to ensure your content is legible: WCAG - 4.5 : 1 HIG (WGAC AAA) - 7 : 1 Material - 15.8 : 1 * The material ratio is large to account for the changes in surface color due to elevation changes 18
- 19. Contrast - Readability 19 https://www.maketecheasier.com/are-dark-themes-better-for-eyes-battery/
- 21. Soft Contrast is more readible 21 https://www.maketecheasier.com/are-dark-themes-better-for-eyes-battery/
- 26. Color With Accents ¡°Apply limited color accents in dark theme UIs, so the majority of space is dedicated to dark surfaces.¡± 26 @mikewolfson
- 27. What about iOS? iOS 13 introduced dark mode -few months ago macOS 10.14 introduced it previously 27 @mikewolfson
- 28. Similarities
- 29. Users will increasingly expect your app to support dark mode ? iOS 13 was 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 released in August 2019. ? iOS will not support force dark. 29
- 30. Semantic color ? Both platforms lean into thinking about color semantically. ? What is the purpose of a color rather than specific hex values. 30 @mikewolfson
- 31. 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. 31 @mikewolfson
- 32. 3 32 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 @mikewolfson
- 33. 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. 33 @mikewolfson
- 34. Depth ? Both platforms provide direction on how depth should be visually communicated. ? Depth visually differs between dark and light mode. 34 @mikewolfson
- 35. 35
- 36. Differences
- 37. 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 37 @mikewolfson
- 38. iOS Materials ? Apple introduced materials for iOS 13. ? Materials have light and dark mode variants. ? Differs from Material Design by using translucency 38 ¡°¡ materials (or blur e?ects) that create a translucent e?ect you can use to evoke a sense of depth. The e?ect of a material lets views and controls hint at background content without distracting from foreground content. ...¡± - iOS HIG @mikewolfson
- 39. 39 Dark Light
- 40. 40 Dark
- 41. 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. 41 @mikewolfson
- 42. 42
- 43. ¡Ö 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. 43 @mikewolfson
- 45. Force Dark Mode 45 <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 @mikewolfson
- 46. Force Dark Mode 46 <LinearLayout ... android:forceDarkAllowed="true" ...> Can also apply it to just a single Layout @mikewolfson
- 47. Force Dark Mode - results 47
- 48. Force Dark Mode - results 48
- 49. Implement DayNight Theme 49 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 @mikewolfson
- 50. Use Night Qualifier for custom colors 50
- 51. Implement DayNight Theme 51 Step 1: Use the Material Themes and Styles Correctly @mikewolfson
- 52. Implement DayNight Theme 52 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
- 53. Provide Desaturated Colors for Night Mode 53 @mikewolfson
- 54. Android Studio Has a tool to modify colors 54 Hint: @mikewolfson
- 55. Material Semantic Colors 55 colorPrimary colorPrimaryDark colorOnPrimary colorSurface colorOnSurface colorSurface (with elevation) colorSecondary colorOnSecondary colorError colorOnError
- 58. Implementing Dark Mode 58 HIG recommends using system color¡¯s as much as possible.
- 59. System Colors Cont... 59 Apple also provides system defined semantic naming for some UI elements @mikewolfson
- 60. How to implement Dark mode with your own custom colors Two Approaches: ¡ñ Asset Catalogue ¡ñ UIColor+Extension 60 @mikewolfson
- 61. Custom Colors: Asset Catalogue 61 You can define custom colors in an app¡¯s Assets.xcassets folder.
- 62. Asset Catalogue cont. 62 ¡ñ Once you have defined a color in an asset catalogue you can refer to it by name when initiating a UIColor via the ¡°UIColor(named: ¡®MyCustomColor¡¯) signature. ¡ñ Asset Catalogue colors can be used in Xibs ¡ñ iOS applications can have many Asset catalogues if you want to make one just for colors. ¡ñ Asset Catalogue colors can also define accessibility variations(High Contrast). @mikewolfson
- 63. Asset Catalogue cont. 63 Benefits of Asset Catalogued Colors: ¡ñ Named colors are easy to comprehend, and visualize ¡ñ ¡®No Code¡¯ implementation allows anyone to update or manage. ¡ñ Can be used in Storyboards and XIb files (iOS 11 and above). ¡ñ The Apple ¡®Recommended¡¯ Way Drawbacks: ¡ñ Uses an xcode document editor and isn¡¯t done programmatically. ¡ñ Future updates to color¡¯s can have negative consequences since Custom colors aren¡¯t searchable in xibs. @mikewolfson
- 64. Custom Colors: UIColor Extension 64 If you hate apple¡¯s interface builders you can define colors in a UIColor extension extension UIColor { static var batmanLogo: UIColor { if #available(iOS 13, *) { return UIColor { (traitCollection: UITraitCollection) -> UIColor in if traitCollection.userInterfaceStyle == .dark { return BatmanUI.batmanYellow } else { return BatmanUI.batmanBlack } } } else { return BatmanUI.batmanBlack } } }
- 65. UIColor Extension - use switch for a11y 65 static var batmanLogo: UIColor { if #available(iOS 13, *) { return UIColor { (traitCollection: UITraitCollection) -> UIColor in switch(traitCollection.userInterfaceStyle, traitCollection.accessibilityContrast) { case (.dark, .high): return BatmanUI.batmanRed case (.dark, _): return BatmanUI.batmanYellow case (_, .high): return BatmanUI.batmanRed default: return BatmanUI.batmanBlack } } } else { return BatmanUI.batmanBlack } }
- 66. UIColor Extension cont. 66 Benefits: ¡ñ Full Control ¡ñ Easy to manage multiple color palettes. ¡ñ UIColor autocompletion ¡ñ Easily Searchable Drawbacks ¡ñ Overhead. ¡ñ Can¡¯t reference custom color¡¯s in Xibs ¡ñ #available ¡ñ Less future proof. @mikewolfson
- 67. ºÝºÝߣ Credits Special thanks to all the people who made and released these awesome resources for free: ? Presentation template by ºÝºÝߣsCarnival - Cymbeline ? Photographs by Unsplash 67 @mikewolfson