Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Dark Mode

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.

0297b9b4bfd45c0f9c6c52bf696b7735?s=128

Bob Dahlberg

December 16, 2019
Tweet

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