Material3의 다이나믹 컬러

Material3 theme in jetpack compose gives different color

이번 글은 Stackoverflow에서 답변을 적고나서 해당 주제에 대해 적으면 좋을거 같아서 적게 되었습니다.

Material3로 앱을 만들어보면 색상이 개발당시 지정했던 것과는 조금 다르게 보이는 경우가 발생할 수 있습니다.

이는 Material3에서 월페이퍼 및 컨텐츠의 색상과 앱의 색상을 동적으로 적절히 조화해서 컬러를 보여주는 다이나믹 컬러를 지원하기 때문입니다.

@Composable
fun ExoPlayerPracticeTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    // Dynamic color is available on Android 12+
    dynamicColor: Boolean = true, // 다이나믹 컬러를 쓸 수 있으면 사용
    content: @Composable () -> Unit
) {
  ...
}

그래서 사용자 환경에 따라서 색상이 달라보이게 됩니다.

배경화면의 색상에 따라 달라보이는 버튼색

이렇게 다이나믹 컬러를 이용하여 사용자가 월페이퍼로 지정한 테마와 앱의 테마가 공존하도록 할 수 있습니다.

어떻게 동작할까

다이나믹 컬러의 동작 방식은 월페이퍼와 컨텐츠에 대해서 비슷하게 동작합니다.

출처 : https://m3.material.io/styles/color/dynamic-color/user-generated-color

1. 월페이퍼에서 컬러 하나를 지정
2. 해당 컬러를 이용하여 5가지 다른 톤의 색상을 생성
3. 각각의 컬러가 UI의 다른 부분에 할당됨
4. 앱에서 지정한 색상과 3에서 할당된 색상을 조합하여 사용자에게 보여줌

Reference

Dynamic color - Material Design 3