blog

ダークモードを探る

はじめに\nAndroid 10でDarkModeが追加され、それを適応できるアプリがますます増えています。 実際、DarkModeはAndroid 6.0の開発者プレビューですでに利用可能でしたが、...

Oct 12, 2020 · 3 min. read
シェア

簡単

Android 10でダークモードが追加されたことで、市場にはダークモードに対応したアプリが増えています。 実は、ダークモードはAndroid 6.0のデベロッパープレビューでは早くも利用可能でしたが、正式版では削除されたばかりです。

ダークモードを実装する最初のステップは、関連するリソースを対応するstrings.xmlやcolors.xmlなどのファイルに配置することで、App Internationalisationの実装と同様に、リソースのハードコーディングを避けることです。

実装タイプ

  • 自動適応フォースダーク
  • アプリ内スイッチング
  • フォローアップシステム

自動適応フォースダーク

<item name="android:forceDarkAllowed">true</item>

ダークモードを実現する手っ取り早い方法は、Force Darkを使うことです。Force Darkを使うには、Android 10以上のデバイスと、ダークテーマでは動作しないライトテーマを使用するアプリテーマが必要です。

Force Dark テーマ設定は、ペイントで色を変換したり、イメージの colorFilter を提供して色を反転させるために、Framework レベルで使用されます。 また、View レベルでダークモードを無効にするために、View にこのプロパティを持たせることもできます。

しかし、フォースダークはあまり効果的ではなく、お勧めできません。

アプリ内スイッチング

/**
 * MODE_NIGHT_NOナイトモードではなく、明るいカラーテーマを使う
 * MODE_NIGHT_YESダークテーマを使う、ナイトモードを使う
 * MODE_NIGHT_AUTO現在時刻に応じて自動的に明るい色に切り替わる/ダークテーマ
 * MODE_NIGHT_FOLLOW_SYSTEM((デフォルト・オプション): システムに従うように設定される。 MODE_NIGHT_NO
 * 
 * @author : kai.mao
 * @date : 2"0"2"0"/7/"1"7
 */
public class DarkModeUtil {
 /**
 * ダークカラーモードを設定する
 */
 public static void setDarkMode(){
 AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES);
 }
 /**
 * ライトのカラーモードを設定する
 */
 public static void setLightMode(){
 AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);
 }
 /**
 * フォローアップシステム
 */
 public static void setModeBySystem(){
 AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM);
 }
 
}

フォローアップシステム

まず、色やその他のリソースのハードコーディングは避けなければなりません。つまり、colors.xmlファイルに記述し、resフォルダの下にvalues-nightフォルダを作成し、そこに対応するダークモードのリソースを入れることで、システム設定でダークモードに切り替えたときに、Actvityがそれに応じてテーマを切り替えるようにします。

android:configChanges="uiMode "が設定されている場合、システムのトグルに従いません。

アダプテーション・レコード

  • 雑穀

    MIUI 11がダークモードに切り替わった後、ランチャーが再起動することがあります。

    MIUI 12 ダークモードを切り替え、色を反転させる可能性も

  • WebView

    WebViewはテーマを適用しません。ダークモードを実装する必要がある場合は、htmlを修正する必要があります。

Read next

Reactプロジェクトでwebpackがsvgを読み込む

webpackの設定インストールファイルの設定2 アイコンコンポーネント3 use

Oct 12, 2020 · 1 min read

HTMLキー・タグ

Oct 11, 2020 · 4 min read

JMS

Oct 9, 2020 · 4 min read