Dark Mode

I got to implement dark mode on a multi-flavored, one-activity, dynamically themed application during the summer and bumped into a few obstacles. In this talk, I’ll shortly describe a few reasons on why to implement dark mode, a basic structure on how to go about it and also share some of the quirks and problems with it.

Transcript

1. Bob Dahlberg Dark Mode
2. Dark Mode
3. The reasons Looks nice Less disturbing Battery saver Digital Eye Strain Melatonin
4. Structure
5. <style 
 name="BaseTheme" parent=“Theme.MaterialComponents.DayNight”> <style 
 name="BaseTheme" parent=“Theme.Appcompat.DayNight"> Base Theme Structure
6. <activity android:name=".MainActivity" android:configChanges="uiMode" android:label="@string/app_name" android:launchMode="singleTop" android:theme="@style/BaseTheme"> Dark mode is a uiMode configuration change. Structure Base Theme Configuration Change
7. Only use styled attributes, no hard coded color- references and definitely no hard coded colors. Structure Base Theme Configuration Change Styled attributes
8. Only use styled attributes, no hard coded color- references and definitely no hard coded colors. 
 <resources> <attr name="themeBackground" format="color""/> <attr name="themeBorder" format="color""/> <attr name="themeHeaderBackground" format="color""/> <attr name="themeHeaderTint" format="color""/> "</resources> Structure Base Theme Configuration Change Styled attributes
9. Only use styled attributes, no hard coded color- references and definitely no hard coded colors. 
 <resources> <attr name="themeBackground" format="color""/> <attr name="themeBorder" format="color""/> <attr name="themeHeaderBackground" format="color""/> <attr name="themeHeaderTint" format="color""/> "</resources> <FrameLayout android:id="@+id/container" android:background="?themeBackground" android:layout_width="match_parent" android:layout_height="wrap_content""/> Structure Base Theme Configuration Change Styled attributes
10. Base theme for margins, styles, sizes etc. <style name="BaseTheme" parent=“Theme…DayNight”> <item name=“snackBarStyle”>@style/snack"</item> !</style> One theme for each flavor/dynamic theme <style name="ExpTheme" parent=“BaseTheme”> <item name=“themeHeader”>@color/mode_header"</item> !</style> Structure Base Theme Configuration Change Styled attributes Theme
11. Base theme for margins, styles, sizes etc. <style name="BaseTheme" parent=“Theme…DayNight”> <item name=“snackBarStyle”>@style/snack"</item> !</style> One theme for each flavor/dynamic theme <style name="ExpTheme" parent=“BaseTheme”> <item name=“themeHeader”>@color/mode_header"</item> !</style> <style name="GtTheme" parent=“BaseTheme”> <item name=“themeHeader”>@color/mode_gt_header"</item> !</style> Structure Base Theme Configuration Change Styled attributes Theme
12. values/palette.xml <resources> <color name=“c1">#212121"</color> <color name="c2">#606060"</color> <color name="c3">#AFAFAF"</color> <color name="c4">#E6E6E6"</color> <color name="c5">#FAFAFA"</color> "</resources> Structure Base Theme Configuration Change Styled attributes Theme 
 Colors
13. Structure Base Theme Configuration Change Styled attributes Theme 
 Colors values/scheme.xml <resources> <color name=“mode_header">@color/c5"</color> <color name=“mode_header_text”>@color/c1"</color> "</resources> values-night/scheme.xml <resources> <color name=“mode_header">@color/c1"</color> <color name=“mode_header_text”>@color/c5"</color> "</resources> values/palette.xml <resources> <color name=“c1">#212121"</color> <color name="c2">#606060"</color> <color name="c3">#AFAFAF"</color> <color name="c4">#E6E6E6"</color> <color name="c5">#FAFAFA"</color> "</resources>
14. view.xml view.xml view.xml view.xml AppTheme attrs.xml view.xml palette.xml BaseTheme scheme.xml night/scheme.xml
15. view.xml view.xml view.xml view.xml AppTheme attrs.xml view.xml scheme.xml night/scheme.xml
16. view.xml view.xml view.xml view.xml AppTheme attrs.xml view.xml palette.xml BaseTheme KvpTheme GtTheme SportTheme DpTheme scheme.xml night/scheme.xml scheme_kvp.xml night/scheme_kvp.xml scheme_gt.xml night/scheme_gt.xml scheme_sport.xml night/scheme_sport.xml scheme_dp.xml night/scheme_dp.xml kvp/scheme.xml kvp-night/scheme.xml
17. Quirks
18. Themes are on Activity level Themes needs to be set before super.onCreate() The theme reference is held by context Creating Fragments uses that context Quirks Themes
19. If using the night qualifier only, make sure you target rather specific. It might be used by smart-phones with their own android OS… Either battery saving or custom theming or flags. Use values-night-v29 to be sure. Quirks Themes Night-Qualifier
20. Let the user choose 
 AppCompatDelegate.setDefaultNightMode(MODE_NIGHT_YES) For the session, not persistent It recreates all Activites started. Even those on the back stack when brought back Quirks Themes Night-Qualifier AppCompatDelegate
21. <activity android:name=".MainActivity" android:configChanges="uiMode" android:label="@string/app_name" android:launchMode="singleTop" android:theme="@style/BaseTheme"> Remember this? Quirks Themes Night-Qualifier AppCompatDelegate uiMode
22. <activity android:name=".MainActivity" android:configChanges="uiMode" android:label="@string/app_name" android:launchMode="singleTop" android:theme="@style/BaseTheme"> Remember this? Don’t do it! Quirks Themes Night-Qualifier AppCompatDelegate uiMode
23. If you’re using the splash screen when booting the application it will follow the system. Quirks Themes Night-Qualifier AppCompatDelegate uiMode Splash screen
24. Last tip Throw the colors way off!
25. Last tip Throw the colors way off!
26. Kotlin Conf: - ASYNCHRONOUS DATA STREAMS 
 WITH KOTLIN FLOW
 - MIGRATING FROM RXJAVA TO FLOW
 - INTRO TO CHANNELS AND FLOW Questions? Thank you! Bob Dahlberg medium.com/dahlbergbob @mr_bob