Key takeaways -You will learn why implementing Dark correctly is important for accessibility and usability -Understand the design implications of implementing a dark UI -Learn specific details about how iOS and Android handle dark mode system-wide, so you can implement these standards in your applications. -See how Material Theming makes implementing Dark Mode easy on Android The new versions of Android and iOS support system-wide Dark Mode. Users will this is supported by the apps they use,, and apps that don't support it will quickly look "out of style". This presentation will highlight some important aspects of implementing application design. Supporting dark mode is not as simple as just switching white to black. There are many important details to implement, to ensure your app is accessible and useable. I will show how I leveraged the Material design system to implement this in a project, and highlight some important learnings from my experience.

1. Handling Dark Mode in
Android and iOS
Mike Wolfson
@mikewolfson

2. Handling Dark Mode in
Android and iOS
Mike Wolfson
@mikewolfson

3. What is
Dark
Mode?
?

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

10. Dark Mode
Principles
(Material)
*

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.
@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 – rather than
black – 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/

20. 20
Contrast
@mikewolfson

21. Soft Contrast is more readible
21
https://www.maketecheasier.com/are-dark-themes-better-for-eyes-battery/

22. 22
CONTRAST
@mikewolfson

23. 23
CONTRAST
Avoid Vibration!

24. 24
CONTRAST
Use Desaturated
Colors

25. 25
CONTRAST CONTRAST CONTRAST
@mikewolfson

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
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
@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

44. Implementation
Example
(Android)
1

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

56. Android Resources
https://developer.android.com/preview/features/darktheme
https://material.io/design/color/dark-theme.html
https://github.com/googlesamples/android-DarkTheme
https://twitter.com/chrisbanes/status/1126607526689005568
56
@mikewolfson

57. Implementation
Example
(iOS)
2

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. 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
67
@mikewolfson

68. Thank You!
Mike Wolfson
@mikewolfson
https://tiny.cc/oredev_darkmode