테마(dark light) 변경은 어떻게합니까?

Question

기본템플릿에서 앱 실행시 자동으로 다크모드 light모드 감지해서 설정해주긴하는데

switch 로 dark 모드 light모드 껏다킬수잇게 할려고하는데 잘안되네요

 

@Composable
fun SetupScreen(drawerState: DrawerState) {
    Scaffold(
        topBar = { CustomAppBar(drawerState = drawerState, title = "설정")}
    ) { paddingValues ->
        Column(
            modifier = Modifier
                .padding(paddingValues)
                .fillMaxSize()
                .verticalScroll(rememberScrollState())
        ) {
            var checked by remember { mutableStateOf(true) }
            Box(Modifier.fillMaxWidth()) {
                Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceAround) {
                    Text(text="Dark Theme",  fontSize = 25.sp)
                    Switch(checked=checked,
                        onCheckedChange = {
                            checked = it
                        })
                    if(checked) {
                        //dark theme
                        MyFirstComposeApplicationTheme {  }
                    }else {
                        //light theme
                        MyFirstComposeApplicationTheme {  }
                    }
                }
            }
        }
    }
}

@Composable
fun MyFirstComposeApplicationTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {
    val colors = if (darkTheme) {
        DarkColorScheme*
    } else {
        LightColorScheme*
    }

    MaterialTheme(
        colors = colors,
        content = content
    )
}

Answer 1

// 테마 상태를 정의하는 Enum

enum class AppTheme { LIGHT, DARK, SYSTEM }

 

@Composable

fun App() {

    var currentTheme by remember { mutableStateOf(AppTheme.SYSTEM) }

    // 시스템 설정을 따를지, 사용자가 지정한 설정을 따를지 결정

    val isDarkTheme = when (currentTheme) {

        AppTheme.LIGHT -> false

        AppTheme.DARK -> true

        AppTheme.SYSTEM -> isSystemInDarkTheme() // Compose 내장 함수

    }

 

    // Theme에 컬러 값을 넘김

 MaterialTheme(

        colorScheme = if (isDarkTheme) darkColorScheme() else lightColorScheme()

    ) {

// 실제 앱의 화면 콘텐츠

        MainScreen(

            currentTheme = currentTheme,

            onThemeClick = { selectedTheme ->

                  currentTheme = selectedTheme

            }

        )

}

}

 

// 테마 변경 버튼이 있는 화면 예시

@Composable

fun MainScreen(currentTheme: AppTheme, onThemeClick: (AppTheme) -> Unit) {

    Column {

        Text("현재 테마 선택")

        Button(onClick = { onThemeClick(AppTheme.LIGHT) }) { Text("라이트 모드") }

        Button(onClick = { onThemeClick(AppTheme.DARK) }) { Text("다크 모드") }

        Button(onClick = { onThemeClick(AppTheme.SYSTEM) }) { Text("시스템 설정") }

    }

}