Jetpack composeでMaterial2とMaterial3を同時に使用すると色変わらなかった話

言いたいこと

Material2とMaterial3はちゃんと分けて使用したほうがいい。
と言うか、可能ならMaterial3にちゃっちゃと移行するべし。
(まだまだなところはあるから、めちゃくちゃ様子見しているが、、、）

起こったこと

contentColorの色が適応されないやんけ！！

想定	実際

状況

業務でJetpack composeを使用したUIの作成を行っているのですが、
TopAppBar周りでMaterial3を使用したく導入して実装していました。

バージョン
Jetpack compose bom : 2022.12.00
→ Material : 1.3.1
→ Material3 : 1.0.1

起きた現象をシンプルに書くとこんな感じ

@Composable
fun Sample(@DrawableRes iconId: Int) {
    // M3 Surface
    Surface(
        color = AppTheme.colors.backgroundPrimary,
        contentColor = AppTheme.colors.primary,
    ) {
        // M2 Icon
        Icon(
            painter = painterResource(id = iconId),
            contentDescription = null,
        )
    }
}

親レイアウトにMaterial3のコンポーネントを使用してtintの色を指定していたのですが、なぜかIconの色が変更されません。

原因

理由はおそらくMaterial2とMaterial3のLocalContentColorは別物っぽいから。

そもそもMaterial3では色やテーマの扱い方が変わっています。
デザイントークンというものが導入されて、役割やテーマの状況、Material Youなどによって色というものが変化するようになりました。
そのためCompositionLocalProviderにcontentColorを渡しても適応されないようです。

対応

対応策としては使用するコンポーネントかスクリーンでMaterial2かMaterial3どちらかに統一するしかないかなと思っています。
上記のレベルくらいであればSurfaceのcontentColorでColorをきちっと指定して親レイアウトが2でも3でもどちらでも大丈夫なように実装するのが無難かもしれない。

余談

おそらく互換性を持たせることはない気がしています。
Material3がStableになったとはいえ、まだまだ実験的なところが多いので様子見をしていますが、
早めにマイグレーションできるようにMaterial3の動向はチェックしておいた方が良さそうです。