[Android] Jetpack Compose - 스타일 지정 및 테마 설정

Theme.kt 보기

ui/theme/Theme.kt 경로로 파일을 열면 다음과 같은 앱 테마 설정 관련 코드가 있다.

@Composable
fun JetpackCompose_StudyTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    // Dynamic color is available on Android 12+
    dynamicColor: Boolean = true,
    content: @Composable () -> Unit
) {
    val colorScheme = when {
        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
            val context = LocalContext.current
            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
        }

        darkTheme -> DarkColorScheme
        else -> LightColorScheme
    }
    val view = LocalView.current
    if (!view.isInEditMode) {
        SideEffect {
            val window = (view.context as Activity).window
            window.statusBarColor = colorScheme.primary.toArgb()
            WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = darkTheme
        }
    }

    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography,
        content = content

    )
}

코드를 보면 JetpackCompose_StudyTheme가 구현에서 MaterialTheme를 사용하는 것을 알 수 있다.

MainActivity의 onCreate() 함수를 보면 다음과 같이 JetpackCompose_StudyTheme을 읽어 자신의 스타일을 지정하고 있다.

    JetpackCompose_StudyTheme {
        MyApp(modifier = Modifier.fillMaxSize())
    }

이렇게 JetpackCompose_StudyTheme은 MaterialTheme을 내부적으로 래핑하므로 MyApp은 테마에 정의된 속성으로 스타일이 지정된다.
따라서 모든 하위 컴포저블에서 MaterialTheme의 세 가지 속성, colorScheme, typography, shapes를 가져올 수 있다.

bold체 설정

1. Greeting() 컴포저블의 Text의 헤드라인을 설정해줌

   👉 Material에 정의된 텍스트 스타일(displayLarge, headlineMedium, titleSmall, bodyLarge, labelMedium 등)에 액세스 가능

               Column(modifier = Modifier
                   .weight(1f)
                   .padding(bottom = extraPadding.coerceAtLeast(0.dp))
               ) {
                   Text(text = "Hello, ")
                   Text(text = name, style = MaterialTheme.typography.headlineMedium)
               }

2. fontWeight로 볼드체 설정

            Column(
                modifier = Modifier
                    .weight(1f)
                    .padding(bottom = extraPadding.coerceAtLeast(0.dp))
            ) {
                Text(text = "Hello")
                Text(
                    text = name,
                    style = MaterialTheme.typography.headlineMedium.copy(
                        fontWeight = FontWeight.ExtraBold
                    )
                )
            }

다크모드 프리뷰 보기

MainActivity에 다음 프리뷰 코드 추가

@Preview(
    showBackground = true,
    widthDp = 320,
    uiMode = UI_MODE_NIGHT_YES,
    name = "GreetingPreviewDark"
)

앱 테마 설정

1. ui/theme/Color.kt 파일에서 색상 설정
   

2. 다음 색상코드 추가

val Navy = Color(0xFF073042)
val Blue = Color(0xFF4285F4)
val LightBlue = Color(0xFFD7EFFE)
val Chartreuse = Color(0xFFEFF7CF)

3. Theme.kt에서 테마 팔레트에 색상 할당

private val DarkColorScheme = darkColorScheme(
    surface = Blue,
    onSurface = Navy,
    primary = Navy,
    onPrimary = Chartreuse
)

private val LightColorScheme = lightColorScheme(
    surface = Blue,
    onSurface = Color.White,
    primary = LightBlue,
    onPrimary = Navy
)

4. 색 구성표의 비 적응형 버전을 보려면 API 수준이 31(적응형 색이 도입된 Android S에 해당)보다 낮은 기기에서 앱을 실행하기

구현 화면

라이트모드(일반모드)

다크모드