Last active
March 8, 2025 16:14
-
-
Save Khazbs/1f1f1b5c05f45dbfa465f249b1e20506 to your computer and use it in GitHub Desktop.
This snippet might help you make a Material Design 3 theme for your Jetpack Compose app
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
package my.awesome.package // put your package name here | |
import android.app.Activity | |
import android.os.Build | |
import androidx.compose.foundation.isSystemInDarkTheme | |
import androidx.compose.material3.* | |
import androidx.compose.runtime.Composable | |
import androidx.compose.runtime.SideEffect | |
import androidx.compose.ui.graphics.toArgb | |
import androidx.compose.ui.platform.LocalContext | |
import androidx.compose.ui.platform.LocalView | |
import androidx.core.view.WindowCompat | |
// you might want to try | |
// https://m3.material.io/theme-builder | |
// for generating a Material Design 3 palette | |
private val LightColorScheme = lightColorScheme( | |
// your light color scheme colors | |
) | |
private val DarkColorScheme = darkColorScheme( | |
// your dark color scheme colors | |
) | |
@Composable | |
fun MyAwesomeTheme( // put your theme name here | |
useDarkTheme: Boolean = isSystemInDarkTheme(), | |
useDynamicColor: Boolean = true, | |
content: @Composable () -> Unit, | |
) { | |
val colorScheme = when { | |
useDynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> { | |
val context = LocalContext.current | |
if (useDarkTheme) dynamicDarkColorScheme(context) | |
else dynamicLightColorScheme(context) | |
} | |
useDarkTheme -> DarkColorScheme | |
else -> LightColorScheme | |
} | |
val view = LocalView.current | |
if (!view.isInEditMode) { | |
SideEffect { | |
val window = (view.context as Activity).window | |
val insets = WindowCompat.getInsetsController(window, view) | |
window.statusBarColor = colorScheme.whatever.toArgb() // choose a status bar color | |
window.navigationBarColor = colorScheme.whatever.toArgb() // choose a navigation bar color | |
insets.isAppearanceLightStatusBars = !useDarkTheme | |
insets.isAppearanceLightNavigationBars = !useDarkTheme | |
} | |
} | |
MaterialTheme( | |
colorScheme = colorScheme, | |
typography = Typography, | |
content = content, | |
) | |
} |
@marlonlom Thank you for the notice! Indeed, nowadays a proper edge-to-edge layout would be preferred.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Note:
window.statusBarColor
is deprecated when building android apps targeting sdk 35.From official documentation: