How to implement dark and light theme in jetpack compose.

Jetpack compose is new declarative ui framework in android which gives new way to create ui in android.

Follow these 6 easy steps to implement dark and light theme in jetpack compose.

step1 -> Open Color.kt from ./ui/theme/Color.kt

step2 -> Define colors for both light and dark theme

// define your colors for dark theme
val clear_dark = Color(0xFFA05162)
val dark_btn = Color(0xFF222427)

// define your colors for dark theme
val light_btn = Color(android.graphics.Color.parseColor("#E9F0F4"))
val light_bg = Color(android.graphics.Color.parseColor("#F6F8F9"))
val clear_light = Color(0xFFF1C8D1)

step3 -> Create color palette for both dark and light theme in Color.kt

sealed class ThemeColors(
    val bacground: Color,
    val surafce: Color,
    val primary: Color,
    val text: Color
)  {
    object Night: ThemeColors(
        bacground = Color.Black,
        surafce = dark_btn,
        primary = clear_dark,
        text = Color.White
    )
    object Day: ThemeColors(
        bacground = light_bg,
        surafce = light_btn,
        primary = clear_light,
        text = Color.Black
    )
}

step4 -> Open Theme.kt from ./ui/theme/Theme.kt

step5 -> Define theme for both light and dark mode and map the color according to your UI.

private val DarkColorPalette = darkColors(
    primary = ThemeColors.Night.primary,
    onPrimary = ThemeColors.Night.text,
    surface = ThemeColors.Night.surafce,
    background = ThemeColors.Night.bacground
)

private val LightColorPalette = lightColors(
    primary = ThemeColors.Day.primary,
    onPrimary = ThemeColors.Day.text,
    surface = ThemeColors.Day.surafce,
    background = ThemeColors.Day.bacground
)

@Composable
fun CalculatorTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {
    val colors = if (darkTheme) {
        DarkColorPalette
    } else {
        LightColorPalette
    }

    MaterialTheme(
        colors = colors,
        typography = Typography,
        shapes = Shapes,
        content = content
    )
}

step6 -> Set the required color to UI Components

package com.example.calculator.ui

@Composable
fun CalculatorButton(
    symbol: String,
    onClick: () -> Unit
) {
    var textVisible by remember { mutableStateOf(true) }
    val scale by animateFloatAsState(if (textVisible) 1f else 0.5f)

    Box(
        modifier = Modifier
            .background(MaterialTheme.colors.surface) // set the required color
            .clickable { onClick() }
            
    ) {
        Text(
            text = symbol,
            fontWeight = FontWeight.Bold,
            fontSize = 32.sp,
            color = green,
            modifier = Modifier
                .padding(26.dp)
        )
    }
}

We have Learned how to implement dark and light theme in jetpack compose 😁😎

Thank you for reading this article. If you found this helpful and interesting, please clap and follow me for more such content.

you can also check out my new app on playstore here
must Have chrome extension if you are applying for job click here

If I got something wrong, mention it in the comments. I would love to improve.

Connect with me on Youtube, GitHub, Twitter and LinkedIn