Material 3のColor Systemには Surface tones というものがあります。この仕様によって想定した色をうまく設定できないなど気づきにくいこともあります。この Surface tones についてComposeの実装を踏まえて簡単にまとめておきます。
これ書いてる時点ではCompose Material 3はalphaなので今後変更の可能性あります。
Surface tones
項目の直接のリンクがないのですが、上記のドキュメントの中盤あたりに、 Surface tones という項目があります。
Material 3におけるSurfaceにはelevationのレベルがあり、+1から+5まであります。このelevationのレベルによって色調が変化する仕様になっています。
ドキュメントのほうにコンポーネントごとのレベル例が記載されています。例えば、AppBarやBottomBarは+2という感じになっています。
androidx.compose.material3
Composeの実装である、 androidx.compose.material3 にもこの仕様が入っています。
今回は alpha14 を使っています。
androidx.compose.material3.Surface には tonalElevation のパラメータがあり、これを設定することでelevationレベルを設定する感じになります。デフォルは 0dp になっています。
また、この tonalElevation は color が MaterialTheme.colorScheme.surface のときのみ有効になります。
以下は tonalElevation の値による色の違いになります。値が大きいほど色が濃くなっています。surfaceの色は Color(0xFFD0BCFF) を指定してます。
実際の色の変換式は ColorScheme.surfaceColorAtElevation として定義されています。（ぼくには計算の意味が分からなかったです…）
Elevationレベル
Material 3のドキュメントではレベルについてのみ記載されていますが、Composeの実装ではdpを指定する必要があります。
このレベルとdpについて ElevationTokens で定義されています。ただし、これは internal となっていて外部からは使用できないようになっています。
これについては IssueTracker で報告されていますが、今後どうなるかは不明です。
ネストによるtonalElevationの加算
Suraface をネストさせて使用した場合に tonalElevation は加算されていきます。
現在の tonalElevation は LocalAbsoluteTonalElevation.current で知ることがあります。
Surfaceの実装を見ると単純に加算されてることがわかると思います。
tonalElevation のデフォルト値
いくつかのコンポーネントでは tonalElevation がデフォルトで設定されています。 NavigationBar 、 BottomAppBar 、 AlertDialog など。
色を設定しても想定通りの色にならない場合は、 tonalElevation を確認してみると良いかもです。
