Material You の色を調べた

Unveiling Material You - Material Design
material-components-android/Color.md at master · material-components/material-components-android

いつもの Material component を使って DynamicColors.applyToActivitiesIfAvailable(this); すれば壁紙またはユーザーが指定した色と連動する値が適用されそうです。

使い方としては以上なのですが Google 製の App ではどういった色の選び方をしているか気になったので調べてみました。

色は colors.xml に定義されており命名に規則がありました。簡単な Compose の実装でリストとして表示してみました:

@Composable
fun ListColorCompose(rootPadding: InsetsPaddingValues?) {
    val context = LocalContext.current

    val items = remember(context) {
        listOf(
            "system_accent1_",
            "system_accent2_",
            "system_accent3_",
            "system_neutral1_",
            "system_neutral2_"
        ).flatMap { prefix ->
            listOf("0", "10", "50", "100", "200", "300", "400", "500", "600", "700", "800", "900", "1000")
                .map { suffix ->
                    val name = "$prefix$suffix"
                    val resId = context.resources.getIdentifier(name, "color", "android")
                    if (resId == Resources.ID_NULL) {
                        log.info("ListColorCompose $name == null")
                        return@map "Not Found ($name)" to Color.White
                    }
                    name to Color(context.getColor(resId))
                }
        }
    }

    LazyColumn(
        contentPadding = rootPadding ?: PaddingValues(0.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp),
    ) {
        items(
            items = items,
            key = { it.first },
        ) { (name, color) -> ColorItem(name = name, color = color) }
    }
}

@Composable
private fun ColorItem(name: String, color: Color) {
    Surface(color = Color.White) {
        Column {
            Text(text = name)
            Divider(Modifier.fillMaxWidth())
            Surface(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(40.dp),
                color = color,
                content = {},
            )
        }
    }
}

こちらの実装は App として動かすか Deploy Preview により確認できます。

どうやら壁紙やユーザーによる可変な system-accent と 固定な system-neutral があるようです。 system-accent は Dark theme を有効・無効と切り替えても変わりませんでした。
追記 (211023): system-neutral も可変でした

Google 製 App のスクリーンキャプチャーを撮って部品ごとにどの色が使われているのか確認してみました。

GMail:

Settings:

Message:

GBoard:

Phone:

Calculator:

Calendar:

Tips:

一部 Material You っぽい色が使われているようだけれどどの定義とも一致しない色がありました。

所感としては

• 特定の Component で system_x_y を使用したら Night Mode ON / OFF どちらも system_x を同じにして y を違う色を選べば良さそう
• GBoard は Night Mode ON / OFF で system_x の x の部分が違っている
  • そのような選び方をする場合 Background に system_neutral 系の色を選べば良さそう
• 表の ? の箇所の色の選び方がいいけどうやって色作っているの
• Night Mode OFF の時の背景色は system_{accent1,neutral1}_{10,50} を使えば良さそう
  • Material 3 のデフォルトは system_neutral1_10
• Night Mode ON の時の背景色は system_neutral1_900 を使えば良さそう
  • Material 3 のデフォルトは system_neutral1_900
• Settings の Button は Night Mode によって色を変えていない
• ボタンは Night Mode OFF-ON の時に system_x_{100,700} や system_x_{600,200} の組み合わせが多い
  • Material 3 の x Containerのデフォルトが system_x_{100,700}
  • Material 3 の Primary と Secondary のデフォルトが system_x_{600,200}
  • system_x_{100,100} の組み合わせもそれなりにある

といったものがあり、これってほぼ Material 3 のデフォルトですね。色の選び方は Applying color to UI - Material Design を押さえておけば特に問題なさそうですね。

timestamp
2021-10-23 (First edition)
2022-07-23 (Last modify)