[Compose] Theme

프로젝트를 생성하면 기본으로 프로젝트명Theme가 생성되어있습니다 

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeTestTheme  {

            }
        }
    }
}

 

ComposeTestTheme으로 이동하면 아래와 같이 선언되어있습니다 

package com.kong.composetest.ui.theme

import android.app.Activity
import android.os.Build
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.dynamicDarkColorScheme
import androidx.compose.material3.dynamicLightColorScheme
import androidx.compose.material3.lightColorScheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext

private val DarkColorScheme = darkColorScheme(
    primary = Purple80,
    secondary = PurpleGrey80,
    tertiary = Pink80,
    surface = Color.Black,
    onSurface = Color.White
)

private val LightColorScheme = lightColorScheme(
    primary = Color.Green,
    secondary = PurpleGrey40,
    tertiary = Pink40,
    surface = Color.Black

    /* Other default colors to override
    background = Color(0xFFFFFBFE),
    surface = Color(0xFFFFFBFE),
    onPrimary = Color.White,
    onSecondary = Color.White,
    onTertiary = Color.White,
    onBackground = Color(0xFF1C1B1F),
    onSurface = Color(0xFF1C1B1F),
    */
)

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

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

 

몇개만 알아보자면, 원래 안드로이드 테마와 비슷합니다 

- darkColorScheme / lightColorScheme: 다크모드 / 라이트모드 에서 적용할 색상들

- primary, secondary, tertiary: 애플리케이션에서 사용되는 주요 색상, ex) primary는 주요 버튼이나 강조되는 component에 사용

- 보통 primary, onPrimary / surface, onSurface처럼 XXX, onXXX를 짝을 이뤄서 사용

예를 들어, primary: 주로 버튼, 강조된 텍스트 등에서 사용되는 기본 색상 / onPrimary: primary 색상 위에 놓이는 텍스트나 아이콘의 색상 

이런식으로 일관성을 유지하게 짝으로 사용된다고 합니다 

 

 

아래처럼 프로젝트의 ui.theme에서도 확인 가능합니다