運用中アプリに ダークテーマを適用してみる

DroidKaigi2020で登壇発表予定だったものです。

- ダークテーマ概要
- 強制ダークを試してみる
- MaterialComponents化
- 地道にやっていき
- WebViewのDarkThemeについて
等です。

Transcript

1. 運用中アプリに
 ダークテーマを適用してみる
 ShimizuAsami
 

2. 自己紹介
 • 名前
 ◦ Shimizu Asami(@starmAIne777)
 ▪ アイコンはかわいいうちの猫です
 • 所属
 ◦ Diverse Inc. 
 • やってること
 ◦ YYCのAndroidエンジニア / Diverseボードゲーム部部長
 
 

3. 今日お話すること
 • ダークテーマとは
 • 対象アプリの紹介
 • 自分のアプリをダークテーマ対応するには
 • 強制ダークを試してみる
 • MaterialDesignComponentsを導入しよう
 • Componentsを微調整しよう
 • 地道にやっていき
 • WebViewについて

4. ダークテーマとは

5. 黒背景ベースのアプリのテーマです。

6. ダークテーマ
 通常(ライトテーマ)
 例えばGooglePlayStoreだと...

7. ダークテーマのメリット
 • 電力消費が節約できる
 • 見やすさが向上(特に視覚障害のあるユーザー、明るさに過敏な人)
 • 暗い場所で使いやすい
 https://developer.android.com/guide/topics/ui/look-and-feel/darktheme 

8. ダークテーマのメリット
 • 電力消費が節約できる
 • 見やすさが向上(特に視覚障害のあるユーザー、明るさに過敏な人)
 • 暗い場所で使いやすい
 https://developer.android.com/guide/topics/ui/look-and-feel/darktheme 
 →Android10で公式対応
 　設定アプリで切り替え設定が可能に！

9. Tips : Android10より前のダークテーマは？
 • API 8(Froyo2010年！)でUIModeManagerの追加、res/value-nightが対応するように なったので、その頃からオプション的に実装は可能だった
 • 公式での切り替えはなかったので、各アプリが自前の設定で切り替えられるように していた
 • バッテリーセーバーでダークテーマ対応済みアプリがダークテーマに切り替わる端 末もあった(らしい)
 Android10以前についての対応はここでは触れないので割愛します。 

10. 対象アプリの紹介

11. 対象アプリの紹介

12. YYCはどんなアプリか
 • 運営実績19年！Androidアプリも2012/10からあります！
 ◦ Androidアプリに関しては2016/3に大リニューアルしました 
 • 「SNS感覚で出会えるアプリ」なので、つぶやき、掲示板、日記等、
 いろいろな機能があります
 ◦ リスト的な表示の画面が多い 
 • PCブラウザから始まり、現在ではスマホブラウザ(lite)、Androidアプリ、iOSアプリが あります
 • 新機能はスマホブラウザ先行型。画面のWebView率高め。

13. 自分のアプリをダークテーマ対応するには

14. 自分のアプリをダークテーマ対応するには？
 1. 強制ダークを有効にする
 
 2. AppThemeをLightベースからDayNightベースにする
 
 のどちらか。
 
 →修正はめちゃくちゃ少ないが、自由度低め
 
 　　→大幅な修正が必要だが、自由度が高い
 

15. 自分のアプリをダークテーマ対応するには？
 1. 強制ダークを有効にする
 →修正はめちゃくちゃ少ないが、自由度低め
 2. AppThemeをLightベースからDayNightベースにする
 →大幅な修正が必要だが、自由度が高い
 のどちらか。

16. 強制ダークを試してみる

17. 強制ダークとは
 「強制ダークでは、ライトテーマのアプリの各ビューを分析し、画面描画の前に自動的に ダークテーマが適用されます。」
 https://developer.android.com/guide/topics/ui/look-and-feel/darktheme 
 
 →つまり通常のライトテーマを
 　自動でダークテーマっぽく表示してくれる！

18. 強制ダークを使ってみよう
 styles.xmlのアプリのテーマに一行足すだけ。
 <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Theme Colors --> <item name="colorPrimary">@color/theme_primary</item> <item name="colorPrimaryDark">@color/theme_primary_dark</item> <item name="colorAccent">@color/theme_accent</item> </style> <item name="android:forceDarkAllowed">true</item> めっちゃ簡単！！

19. 適用してビルドしてみました

20. 強制ダーク
 通常(ライトテーマ)
 強制ダーク適用してみた

21. 強制ダーク
 通常(ライトテーマ)
 強制ダーク適用してみた

22. えっ充分じゃん！！！

23. 強制ダーク
 通常(ライトテーマ)
 でも微妙な画面も……

24. 強制ダーク
 通常(ライトテーマ)
 でも微妙な画面も……
 色が汚い
 明るい背景画像 が変わってない

25. デザイナーに見てもらって感想をもらいました
 • 自動的に色が反転して、レントゲンみたいな色になっている箇所がある
 
 • 色のばらつきが気になる(文字とタブ選択の色が違う)
 
 
 などなど細かい点で気になった模様。

26. 強制ダークの微調整
 • 特定のViewを強制ダーク適用外にできるのでそれを設定
 • 画面全体で気に食わない場合はvalue-nightやdrawable-night等を切って、その画 面のみ「ダークモード状態」になるように修正をしてあげる
 
 のどちらかで対応しましょう。

27. 特定のViewを強制ダーク適用外に
 強制ダークをオフにしたいViewのxmlに
 android:forceDarkAllowed=”false”を設定するだけ。
 <Button android:id="@+id/dialog_recommend_men_btn" style="@style/YycButton.DialogAction" android:forceDarkAllowed="false" android:layout_width="0dp" android:layout_height="wrap_content" />
28. サイズ別drawableのように、nightモード用のリソースを用意。
 res/value
 res/value-night
 res/drawable-night-xhdpi
 res/drawable-night-xxhdpi 等
 (代替リソース:drawable-のあとの順番は↓で確認)
 https://developer.android.com/guide/topics/resources/providing-resources 
 特定画面だけをダークモードにする

29. nightリソース修正
 強制ダーク
 こんな感じにできます！
 res/layout-night 
 forceDarkAllowed=false 
 AppBar修正
 res/drawable-night 
 背景画像(ネガ)

30. 強制ダークまとめ
 • 適応方法はベースとなるスタイルにandroid:forceDarkAllowed=”true”を 追加するだけ。
 • 自分で詳細を設定することは基本的にはできない。特定のViewで強制ダークを OFFにすることは可能。
 • ImageViewの場合、中のdrawableの解析＋修正まではされない。
 • 代替リソースのNightは適用されるので、drawableの背景等の置き換えは代替リ ソースで個別対応しても良いかも。

31. でもどうせなら、
 本格的なダークテーマ対応したい！

32. 自分のアプリをダークテーマ対応するには？
 1. 強制ダークを有効にする
 →修正はめちゃくちゃ少ないが、自由度低め
 2. AppThemeをLightベースからDayNightベースにする
 →大幅な修正が必要だが、自由度が高い
 のどちらか。

33. MaterialDesignComponentsを導入しよう

34. MaterialDesignComponentsって？
 https://github.com/material-components/material-components-android
 • MaterialDesignをアプリに簡単に適用できるよう、各コンポーネントのデザインが Material化されたライブラリ
 • Theme設定するとデフォルトのコンポーネントがすべて置き換わります
 • Themeに設定しなくても各コンポーネントのみ利用することも可能

35. MaterialDesignComponentsのダークテーマ
 https://developer.android.com/guide/topics/ui/look-and-feel/darktheme?hl=ja#テーマとスタイル
 • AndroidDevelopersのダークテーマに「マテリアルコンポーネントの使用をおすすめ します」との一文
 ◦ Theme属性の修正で各コンポーネントに反映されるため 
 • 実際AndroidStudioで新規アプリを作成するとデフォルトが MaterialDesignComonentsのDayNight！ほぼ公式！

36. MaterialDesignComponentsのダークテーマ
 https://material.io/develop/android/theming/color/ 
 MaterialDesignのThemeに設定されている 属性。
 これらを修正することで、各コンポーネント の色も合わせて変わってくれます 

37. MaterialDesignComponents AndroidLibrary
 https://github.com/material-components/material-components-android 
 • MaterialDesignComponentsのLibraryのGithubには以下のものが入っているので一 度Cloneすると便利かもしれない
 ◦ MaterialDesignConponentsLibrary本体 
 ◦ MaterialDesignのカタログアプリ 
 ◦ 「Themeの各属性の色を変えたらComponentsがどのように変化するか」がわかるThemeBuilderア プリ(めっちゃ便利)
 

38. MaterialDesignComponents AndroidLibrary ThemeCatalog

39. MaterialDesignComponents AndroidLibrary ThemeCatalog
 <color name="color_primary">#6200ee</color> <color name="color_primary_variant">#3700b3</color> <color name="color_secondary">#03dac6</color> <color name="color_secondary_variant">#018786</color> <!--colorBackground appears behind scrollable content and is used for the default window--> <!--background. colorSurface is mapped to the surface of components such as cards, sheets--> <!--and menus. colorError is used to indicate an error state for components such as--> <!--text fields.--> <color name="color_background">#ffffff</color> <color name="color_surface">#ffffff</color> <color name="color_error">#b00020</color> <!--"On" colors define how text, icons and strokes are colored in relation to the surface--> <!--on which they appear.--> <color name="color_on_primary">#ffffff</color> <color name="color_on_secondary">#000000</color> <color name="color_on_background">#000000</color> <color name="color_on_surface">#000000</color> <color name="color_on_error">#ffffff</color> material-components-android/material-theme-builder/src/main/res/values/themes.xml 
 material-components-android/material-theme-builder/src/main/res/values/color.xml 
 material-components-android/material-theme-builder/src/main/res/values-night/color.xml 

40. MaterialDesignComponentsのダークテーマを使ってみよう
 • MaterialComponentsForAndroidをプロジェクトに入れる
 • styles.xmlのベースのテーマをMaterialConponents.DayNightに変更
 <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar"> dependencies { implementation 'com.google.android.material:material:1.1.0' } 2/3にStableが出たよ！！ 

41. これでうちのアプリも
 ダークモードに対応だ！！！

42. ダークテーマモードで見てみるぞ！

43. ダークテーマモードで見てみるぞ！

44. 全然変わってない
 (※笑い事ではない)

45. MaterialDesignComponents.DayNightに変えた直後の感想
 • ダークモードにしても全然かわってない……
 ◦ このタイミングでちゃんと作ってあるアプリだとだいぶDarkThemeっぽくなってるはずだけども、弊ア プリはそうではなかった 
 ◦ 後述するが、各背景に @color/whiteが直接的に設定されていた 
 ◦ 最近作成されて、特に背景色が設定されてなかったCardViewだけはDefaultの背景色が設定されて 黒くなっていた
 • ちょこちょこ見た目が変わったコンポーネントがある
 ◦ 前述の通り、Themeを設定すると各ComponentsがMaterialComponentsの見た目になるため。次章 で一つずつ修正していきます。 

46. Tips：MaterialDesignComponentsのツールについて
 MaterialDesignComponentsのResourcesには便利なツールがたくさん。
 • Design Kit for SketchではSketch(macのデザインソフト)に対応した、Material Design用のテンプレートが用意されている。
 ◦ DarkThemeも合わせて考えることができます 

47. Tips：MaterialDesignComponentsのツールについて
 デザイナーさんにDesign for Sketch をベースに作成してもらった各種色 の見本
 これをベースに修正していきました
 ガイドラインがちゃんとない場合は あると便利ですね

48. Componentsを微調整しよう

49. 各Componentsの見た目を修正
 ThemeをAppCompatからMaterialComponentsに変更したことで、アプリ内で使われてい るコンポーネントで見た目が変わったものを確認する
 私のアプリの場合では以下のものが気になりました。
 • EditText
 • Button
50. 新DayNightテーマ
 旧テーマ
 EditText(TextInputLayout)

51. 新DayNightテーマ
 旧テーマ
 Button

52. 一つずつ整えていこう！

53. Tips：Componentsの微調整の前に
 私のアプリの場合だと、起動直後の画面で見た目が変わったコンポーネントが存在しな かったので、対象コンポーネントをのせたTempActivityを一発目の起動Activityとして設 定したら便利でした。(MaterialDesignComponentsLibraryのBuilderひっぱってきてもいい かも)
 

54. Tips：android:xxxxとxxxx、app:xxxxの違い
 android:xxxxは「layoutXmlでAndroid固有の属性につく」
 app:xxxxは「layoutXmlでそのコンポーネント自身が設定した属性につく (MaterialComponentsの属性に設定したいときはこれを設定)」
 xxxxは「styles.xmlのapp:xxxx」
 （※appに関してはLayoutのrootで xmlns:app="http://schemas.android.com/apk/res-auto"
 が設定されているものとする）

55. TextInputLayout

56. TextInputLayout
 DefaultStyleは Widget.MaterialComponents.TextInputLayout.FilledBox Material Design guidelines: Text Fields 
 Material Components for Android: TextFields 
 1. Container
 2. Leading icon (optional)
 3. Label text
 4. Input text
 5. Trailing icon (optional)
 6. Activation indicator
 7. Helper text (optional)

57. TextInputLayout
 • 背景色(前ページのContainer)をなくしたい！(ガイドライン的にはTextInputFieldは 目立たせたほうがいいっぽいけど)
 ◦ boxBackgroundColor を@nullまたはtransparentに(見た目的には変わらないはず) 
 • ヒントの色を別の色(弊アプリはPrimaryColorの青)に変更
 ◦ android:textColorHint を設定。これは従来のEditTextと同じ。 
 AppTheme
 MaterialComponents 

58. 調整後
 調整前
 EditText(TextInputLayout)

59. styles.xmlはこうなった(TextInputLayout編)
 <style name="BaseTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar"> <item name="textInputStyle">@style/YycEditTextColorControl</item> </style> <style name="YycEditTextColorControl" parent="Widget.MaterialComponents.TextInputLayout.FilledBox"> <item name="android:textColorHint">?attr/colorPrimary</item> <item name="boxBackgroundColor">@null</item> </style>
60. Button

61. Button(Material Button)
 DefaultStyleはcom.google.android.material.button.MaterialButton のfilled、elevated(↓でいうと3)
 Material Design guidelines: Buttons 
 Material Components for Android: MaterialButton 
 A. Text label
 B. Container
 C. Icon(optional)

62. Button(Material Button)
 • 角を丸くしたい！
 ◦ app:cornerRadius で角の大きさを指定できます。↓のように丸いボタンにしたい場合はheight の半分の高さを指定してあげればOK 
 • 背景色をつけたい！
 ◦ AppTheme版だとbackgroundで画像を設定していたが、 app:backgroundTint で色を設定
 AppTheme
 MaterialComponents 

63. 調整後
 調整前
 Button(Material Button)

64. Button(Material Button)　layout_heightを指定するときの注意
 • MaterialButtonはシャドウ設定のために、layout_heightよりも小さく表示される よう、insetが設定されています。
 旧テーマ
 inset未設定
 (色も未設定)
 ex) layout_height=16dpのボタン
 app:insetTop=”0dp” app:insetBottom=”0dp” • もしlayout_heightの全幅でボタンを表示したい場合は↓を設定
 ◦ app:insetTop=0dp ◦ app:insetBottom=0dp • その場合ちゃんとシャドウが表示されるかどうかを確認しておくこと！
65. styles.xmlはこうなった(MaterialButton編)
 <style name="BaseTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar"> <item name="buttonStyle">@style/YycButton</item> </style> <style name="YycButton" parent="Widget.MaterialComponents.Button"> <item name="android:textSize">@dimen/text_button</item> <item name="android:textColor">@color/white</item> <item name="android:textStyle">bold</item> <item name="cornerRadius">@dimen/shape_rounded_btn_radius</item> <item name="android:minHeight">@dimen/view_height_large</item> </style> <style name="YycMiniButton" parent="Widget.MaterialComponents.Button"> <item name="android:textColor">@color/white</item> <item name="cornerRadius">@dimen/view_my_page_option_btn_radius</item> <item name="android:textSize">@dimen/text_ssmall</item> <item name="android:insetTop">0dp</item> <item name="android:insetBottom">0dp</item> <item name="android:padding">0dp</item> <item name="android:gravity">center</item> <item name="android:minHeight">@dimen/view_my_page_option_btn_height</item> </style>
66. 調整後
 調整前
 Components微調整BeforeAfter

67. だいぶいい感じになりましたね！
 

68. Tips：背景色ありボタンの文字色
 Lightモードのときは白文字のことが多いが、Darkのときは白文字のまま？黒文字のま ま？
 →Google的には......

69. Tips：背景色ありボタンの文字色
 Lightモードのときは白文字のことが多いが、Darkのときは白文字のまま？黒文字のま ま？
 →Google的には......基本的には黒だがどっちもある！

70. Tips：背景色ありボタンの文字色
 PlayStoreアプリ→
 
 ←PlayMovieアプリ

71. Tips：背景色ありボタンの文字色
 PlayStoreアプリ→
 
 ←PlayMovieアプリ

72. Tips：背景色ありボタンの文字色
 ←PlayMovieアプリ

73. Tips：背景色ありボタンの文字色
 ←PlayMovieアプリ
 R:191
 G:33
 B:78
 R:254
 G:53
 B:97
 R:188
 G:57
 B:75

74. Tips：背景色ありボタンの文字色
 PlayStoreアプリ→
 
 ←PlayBookアプリ
 R:106
 G:179
 B:238
 R:106
 G:179
 B:238

75. Tips：背景色ありボタンの文字色
 https://material.io/resources/color/#!/?view.left=0&view.right=0
 MaterialDesignのResourcesのColorToolならPrimaryColor/SecondaryColorを設定すれ ば適切な文字色を決めてくれます。
 まあ弊アプリはこの組み合わせで 
 FABのオブジェクト白だけど…… 

76. 地道にやっていき

77. Theme.MaterialComponents.DayNight適用直後のダークモード

78. Theme.MaterialComponents.DayNight適用直後のダークモード

79. ハードコーディング減らし
 • 何故か弊アプリはRootViewにそれぞれbackgroundColor=”@color/white” を設定しまくっていたので全部削除
 • ついでにToolbarも何故か丁寧に backgroudncolor=”?attr/colorPrimary”が設定されていたので全部削 除(Find in Pathで全部確認の上削除)

80. ハードコーディング減らし

81. ハードコーディング減らし
 !?

82. ハードコーディング減らし
 • xmlでのハードコーディングをなくしたのに白背景のまま！
 • よく見たらコード上で背景色変えてた……Select状態があるかららしい
 ◦ 素直にcolor-stateドローワブルのxml作成して適用しました 

83. サイズ別drawableのように、nightモード用の代替リソースを用意。
 res/value
 res/value-night
 res/drawable-night-xhdpi
 res/drawable-night-xxhdpi 等
 (代替リソース:drawable-のあとの順番は↓で確認)
 https://developer.android.com/guide/topics/resources/providing-resources 
 nightモード用のcolor,imageを適用したい！！

84. Tips：実際にあった代替リソース失敗談
 TextColorを変更したい！
 values/styles.xmlのベーステーマを変更したのに変わらない……！(いろいろやって一時 間経過)
 ←value-v21のstyles.xmlでtextColorをさらに上書きで設定していた！

85. その他いろいろやったこと
 • TextColorはMaterialComponentsのThemeの属性とは関係なく別途設定されていま す。
 ◦ ?android/TextColor ◦ ?android/TextColorSecondary ▪ 弊アプリでは変更したかったので、value-night/styles.xmlで設定。 
 • 分割されているリスト↓は手前をCardViewの背景と同じ色で浮き上がらせているよ うにした
 ◦ ?colorBackgroundFloating を設定すればOK

86. WebViewについて
 specialThanks 弊社Webフロントエンジニア中島さん 

87. Webサイトのダークテーマ対応
 • CSSのmedia queryにprefers-color-scheme: darkを追加
 • 通常のアプリと同様、システム設定でダークモードをONにすると、少なくともChrome だとダークテーマ表示になります。
 ◦ なおiOSのsafari,chromeの他、をはじめとした対応済みブラウザで見たらダークテーマ表示になりま す

88. WebViewについて
 • 何故かWebViewはBaseThemeが Theme.MaterialComponents.DayNight.DarkActionBarでも、
 何故かWebViewの中はLightテーマのまま。
 ←@media(prefers-color-scheme: dark) でダークテーマっぽく しているはずなのになぜか白いままのWebView(オレンジ部分) 

89. WebViewについて
 https://stackoverflow.com/questions/57449900/letting-webview-on-android-work-with-prefers-color-schem e-dark
 何故かWebSettings.setForceDark(WebSettings.FORCE_DARK_ON)を
 設定すると、@media(prefers-color-scheme: dark)が設定されている場合に そちらが優先的に適用されます。
 prefers-color-scheme 
 未設定かつ
 forceDark
 prefers-color-scheme 
 設定済み
 forceDark

90. なお弊アプリでは
 • iOS/Android/Web版の3種類が同じURLを参照していたりする
 • しかもめちゃくちゃWebView利用する場所が多い
 • Android版だけ修正しようとすると、テンプレートが「iOS/Web版」
 「Android_Light」「Android_Dark」の3パターン必要になる
 • ので、AndroidのみではなくてiOS/Web版の対応も同時にしたい
 そうしたら「Light版」「Dark版」の2つで済む
 • まあ全部見直す羽目になるからリニューアルしたい
 ◦ （けど現実的には厳しいよねー） 

91. まとめ

92. まとめ
 • Androidのダークテーマ対応方法は2パターンあります
 ◦ 強制ダーク
 ◦ ThemeをDayNightに変更 
 • DayNight対応するならMaterialComponentのThemeのほうが全体的に対応してくれ て楽
 • 色のハードコーディングはやめる、自分アプリへの色の設定も、できればThemeの 属性を使うと全体的な均衡がとれて良い
 • LightとDarkでresourceを変更したい場合は代替リソースを用意
 • DayNightテーマでWebView使いたいときはmediaQueryで (prefers-color-scheme: dark)を設定forceDarkをONにする

93. やりたかったけどできなかったこと
 • そもそものStyleの整理
 ◦ 多分コンポーネントの棚卸ししてパターンを整理す べきだったんだろうな…… 
 ◦ Styleの全体の見直しタイミングとしては最適だけ どもあまりにもでかすぎる修正になる　リニューア ル並
 ◦ Textとかもこれにそれぞれ当てはめていきたかっ たな
 • この発表までにダークテーマ用アプリをリ リースすること
 ◦ 特にWebViewのあたりは足並みを揃える必要が あったのでできなかった