Jetpack Compose에서 나만의 커스텀 테마 만들기

Step 1. 색상 정의 (Color.kt)

import androidx.compose.ui.graphics.Color

object AppColors {
    val PrimaryBlue = Color(0xFF01b9ff)
    val BackgroundGray = Color(0xfff7f7f7)

    val TextRed = Color(0xffff4b4b)
    val ButtonRed = Color(0xFFEDC9C9)

    val TextBlue = Color(0xff264d92)
    val ButtonBlue = Color(0xFFBCD6ED)
}

Step 2. 폰트 스타일 정의 (Typography.kt)

import androidx.compose.material3.Typography
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.sp

val AppTypography = Typography(
    displayLarge = TextStyle(fontSize = 32.sp, lineHeight = 40.sp, fontWeight = FontWeight.Bold),
    headlineLarge = TextStyle(fontSize = 24.sp, lineHeight = 32.sp, fontWeight = FontWeight.SemiBold),
    titleMedium = TextStyle(fontSize = 20.sp, lineHeight = 28.sp, fontWeight = FontWeight.Medium),
    bodyLarge = TextStyle(fontSize = 16.sp, lineHeight = 24.sp, fontWeight = FontWeight.Normal),
    bodyMedium = TextStyle(fontSize = 14.sp, lineHeight = 20.sp, fontWeight = FontWeight.Normal),
    labelSmall = TextStyle(fontSize = 12.sp, lineHeight = 16.sp, fontWeight = FontWeight.Light),
)

Step 3. 테마 구성 (Theme.kt)

import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.foundation.isSystemInDarkTheme

private val LightColorScheme = lightColorScheme(
    primary = AppColors.PrimaryBlue,
    background = AppColors.BackgroundGray,
    onPrimary = Color.White,
    surface = Color.White,
    onSurface = AppColors.TextBlue,
    error = AppColors.TextRed,
)

@Composable
fun MyAppTheme(
    useDarkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colorScheme = LightColorScheme // darkTheme 대응 시 분기 추가

    MaterialTheme(
        colorScheme = colorScheme,
        typography = AppTypography,
        shapes = Shapes(),
        content = content
    )
}

Step 4. 사용 예시

@Composable
fun HomeScreen() {
    MyAppTheme {
        Scaffold(
            topBar = {
                TopAppBar(title = { Text("홈", style = MaterialTheme.typography.titleMedium) })
            }
        ) { innerPadding ->
            Text(
                text = "샷추가",
                modifier = Modifier.padding(innerPadding),
                color = MaterialTheme.colorScheme.error
            )
        }
    }
}

마무리

Compose에서 커스텀 테마를 도입하면 다음과 같은 장점이 있다:

• 디자인 시스템과의 일관성 유지
• 폰트/색상 재사용성 증가
• 다크모드 및 접근성 대응 확장 가능