DEV Community

myougaTheAxo
myougaTheAxo

Posted on • Originally published at zenn.dev

Material3 Theme Customization - ColorScheme, Typography & Dynamic Color

#android #kotlin #compose #tutorial

Material3 Theme Customization

lightColorScheme/darkColorScheme 

val LightColors = lightColorScheme(
    primary = Color(0xFF6750a4),
    onPrimary = Color.White,
    secondary = Color(0xFF625b71),
    error = Color(0xFFb3261e)
)

val DarkColors = darkColorScheme(
    primary = Color(0xFFd0bcff),
    onPrimary = Color(0xFF381e72),
    secondary = Color(0xFFccc7f0),
    error = Color(0xFFf9dedc)
)
Enter fullscreen mode Exit fullscreen mode

Custom Typography 

val CustomTypography = Typography(
    displayLarge = TextStyle(
        fontSize = 57.sp,
        fontWeight = FontWeight.Bold,
        fontFamily = FontFamily.SansSerif
    ),
    bodyMedium = TextStyle(
        fontSize = 14.sp,
        lineHeight = 20.sp
    )
)
Enter fullscreen mode Exit fullscreen mode

Shapes 

val AppShapes = Shapes(
    small = RoundedCornerShape(4.dp),
    medium = RoundedCornerShape(8.dp),
    large = RoundedCornerShape(12.dp)
)
Enter fullscreen mode Exit fullscreen mode

Dynamic Color (Android 12+) 

val colorScheme = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
    val context = LocalContext.current
    dynamicLightColorScheme(context)
} else {
    LightColors
}
Enter fullscreen mode Exit fullscreen mode

DataStore Theme Persistence 

val themePreference = context.dataStore.data.map { prefs ->
    prefs[booleanPreferencesKey("dark_mode")] ?: false
}

// Observe in Compose:
val isDarkMode by themePreference.collectAsState(false)
Enter fullscreen mode Exit fullscreen mode

Extended Colors via CompositionLocal 

val ExtendedColors = CompositionLocal.staticCompositionLocalOf {
    ColorScheme()
}

val tertiary = ExtendedColors.current.tertiary
Enter fullscreen mode Exit fullscreen mode

8 Android app templates on Gumroad

Top comments (0)