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.

Bob Dahlberg

December 16, 2019
Tweet

More Decks by Bob Dahlberg

Other Decks in Programming

Transcript

  1. Only use styled attributes, no hard coded color- references and

    definitely no hard coded colors. Structure Base Theme Configuration Change Styled attributes
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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>
  8. 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
  9. 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
  10. 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
  11. 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
  12. If you’re using the splash screen when booting the application

    it will follow the system. Quirks Themes Night-Qualifier AppCompatDelegate uiMode Splash screen
  13. 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