Jetpack Compose - Dark Theme

The Material dark theme system can be used to create a beautiful and functional dark theme for your app. A dark theme generally consists of dark background colors and light foreground colors for elements such as text and iconography.

To set Dark and Light theme with a jetpack to compose in Android application.

Add 3 options for Dark, Light and System theme

object ThemeMode {
    const val Dark = "Dark"
    const val Light = "Light"
    const val System = "System"
}

Add data class ThemeData with title and value

data class ThemeData(
    val title: String,
    val value: Boolean
)

where the title will be ThemeMode and value will be true or false depending upon dark and light theme Let's add a ThemeDemo composable function where we are going to add all the logic of UI

We can generate dark and light colors using the material theme builder

package io.material.compose

import androidx.compose.foundation.background
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.material.Card
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material.icons.filled.PlayArrow
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.navigation.NavController
import io.material.compose.ui.theme.Material3ComposeTheme
import io.material.compose.ui.theme.Purple40


data class ThemeData(
    val title: String,
    val value: Boolean
)

object ThemeMode {
    const val Dark = "Dark"
    const val Light = "Light"
    const val System = "System"
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun DarkLightModeDemo() {
    val context = LocalContext.current
    val mode = remember { mutableStateOf(ThemeData(ThemeMode.Light, false)) }
    Material3ComposeTheme(
        darkTheme = mode.value.value,
        content = {

                Scaffold(
                    topBar = {
                        CenterAlignedTopAppBar(
                            title = { Text("Dark theme") },
                            Modifier.background(Purple40),
                            navigationIcon = {
                                IconButton(onClick = { /* doSomething() */
                                    navController.navigateUp()
                                }) {
                                    Icon(
                                        imageVector = Icons.Filled.ArrowBack,
                                        contentDescription = "Localized description"
                                    )
                                }
                            },


                            actions = {
                                IconButton(onClick = {
                                }) {
                                    Icon(
                                        tint = Purple40,
                                        imageVector = Icons.Filled.PlayArrow,
                                        contentDescription = "Read more"
                                    )
                                }
                            }


                        )
                    },
                    content = {

                        val value = isSystemInDarkTheme()
                        Column(
                            content = {
                          
                            RadioButton(
                                selected = mode.value.title == ThemeMode.Dark,
                                onClick = {
                                    mode.value = ThemeData(ThemeMode.Dark, true)
                                }

                            )
                            Spacer(modifier = Modifier.size(16.dp))
                            Text(
                                ThemeMode.Dark,
                                style = MaterialTheme.typography.labelLarge,
                                color = MaterialTheme.colorScheme.onBackground,
                                fontWeight = FontWeight.Bold
                            )
                            Spacer(modifier = Modifier.size(16.dp))
                            RadioButton(
                                selected = mode.value.title == ThemeMode.Light,
                                onClick = {
                                    mode.value = ThemeData(ThemeMode.Light, false)
                                })
                            Spacer(modifier = Modifier.size(16.dp))
                            Text(
                                ThemeMode.Light,
                                style = MaterialTheme.typography.labelLarge,
                                color = MaterialTheme.colorScheme.onBackground,
                                fontWeight = FontWeight.Bold
                            )
                            Spacer(modifier = Modifier.size(16.dp))
                            RadioButton(
                                selected = mode.value.title == ThemeMode.System,
                                onClick = {
                                    mode.value = ThemeData(ThemeMode.System, value)
                                })
                            Spacer(modifier = Modifier.size(16.dp))
                            Text(
                                ThemeMode.System,
                                style = MaterialTheme.typography.labelLarge,
                                color = MaterialTheme.colorScheme.onBackground,
                                fontWeight = FontWeight.Bold
                            )
                            //.................................


                            Spacer(modifier = Modifier.size(16.dp))
                            Card(
                                content = {
                                    Column(content = {
                                        Text("Card with dark and light theme"
                                        ,   style = MaterialTheme.typography.labelLarge)
                                    }, modifier = Modifier.padding(16.dp))
                                }, modifier = Modifier.fillMaxWidth()
                            )

                        }, modifier = Modifier.padding(30.dp))

                    }
                )

        })
}

..