앱의 스타일 지정 및 테마 설정

ui/theme/Theme.kt 파일에는 프로젝트 테마 구현 안에 MaterialTheme가 존재한다

@Composable
fun BasicsCodelabTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    // Dynamic color is available on Android 12+
    dynamicColor: Boolean = true,
    content: @Composable () -> Unit
) {
    // ...

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

• MaterialTheme는 Material 디자인 스타일을 적용하는 기본 테마 시스템이다
• 이것을 이용하면 앱의 색상, 글꼴 스타일, 모양을 일관되게 설정할 수 있다

 

Material 요소

• colorScheme: 앱의 색상 팔레트
• typography: 앱의 텍스트 스타일
• shapes: 앱의 버튼 및 카드 등의 모양

 

Text 스타일 예시

• MaterialTheme.typography.headlineMedium 적용

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

 

 

copy를 이용한 글꼴 수정

copy 함수를 사용하면 기존 스타일을 유지하면서 원하는 속성만 수정할 수 있다

import androidx.compose.ui.text.font.FontWeight
// ...
Text(
    text = name,
    style = MaterialTheme.typography.headlineMedium.copy(
        fontWeight = FontWeight.ExtraBold
    )
)

---

다크모드 미리 보기 설정

UI_MODE_NIGHT_YES를 @Preview 주석에 추가

import android.content.res.Configuration.UI_MODE_NIGHT_YES

@Preview(
    showBackground = true,
    widthDp = 320,
    uiMode = UI_MODE_NIGHT_YES, // 다크 모드
    name = "GreetingPreviewDark"
)
@Preview(showBackground = true, widthDp = 320)
@Composable
fun GreetingPreview() {
    BasicsCodelabTheme {
        Greetings()
    }
}

 

다크 모드 미리보기 추가된 모습

---

색상 정의

ui/theme 폴더에 있는 Color.kt에 정의를 추가할 수 있다

val Purple80 = Color(0xFFD0BCFF)
val PurpleGrey80 = Color(0xFFCCC2DC)
val Pink80 = Color(0xFFEFB8C8)

val Purple40 = Color(0xFF6650a4)
val PurpleGrey40 = Color(0xFF625b71)
val Pink40 = Color(0xFF7D5260)

//추가한 색상
val Navy = Color(0xFF073042)
val Blue = Color(0xFF4285F4)
val LightBlue = Color(0xFFD7EFFE)
val Chartreuse = Color(0xFFEFF7CF)

 

MeterialTheme 팔레트에 색상 할당

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

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

 

비 적응형 버전을 보려면 API 수준이 31보다 낮은 기기에서 앱을 실행해야 한다

라이트 모드

다크 모드