Skip to content

Instantly share code, notes, and snippets.

@hvisser
Last active July 16, 2022 15:37
Show Gist options
  • Star 11 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save hvisser/8db0669439bad5b8d7491d4ef3f6d3de to your computer and use it in GitHub Desktop.
Save hvisser/8db0669439bad5b8d7491d4ef3f6d3de to your computer and use it in GitHub Desktop.
Using both Material 3 and material components in Compose within the same theme
// conversions based on https://material.io/blog/migrating-material-3, deprecated colors set to Colors.Red
@Composable
fun fromMaterial3Theme(isLight: Boolean): Colors {
val scheme = MaterialTheme.colorScheme
return Colors(
primary = scheme.primary,
primaryVariant = Color.Red,
secondary = scheme.secondary,
secondaryVariant = Color.Red,
background = scheme.background,
surface = scheme.surface,
error = scheme.error,
onPrimary = scheme.onPrimary,
onSecondary = scheme.onSecondary,
onBackground = scheme.onBackground,
onSurface = scheme.onSurface,
onError = scheme.onError,
isLight = isLight
)
}
@Composable
fun fromMaterial3Theme(): Typography {
val typography = MaterialTheme.typography
return Typography(
h1 = typography.displaySmall,
h2 = typography.headlineLarge,
h3 = typography.headlineMedium,
h4 = typography.headlineSmall,
h5 = typography.titleLarge,
subtitle1 = typography.titleMedium,
subtitle2 = typography.titleSmall,
body1 = typography.bodyLarge,
body2 = typography.bodyMedium,
caption = typography.bodySmall,
button = typography.labelLarge,
overline = typography.labelMedium
)
}
@Composable
fun MaterialBridgeTheme(
colorScheme: ColorScheme,
typography: androidx.compose.material3.Typography,
isDark: Boolean = isSystemInDarkTheme(),
content: @Composable () -> Unit
) {
MaterialTheme(colorScheme = colorScheme, typography = typography) {
androidx.compose.material.MaterialTheme(
colors = fromMaterial3Theme(isLight = !isDark),
typography = fromMaterial3Theme(),
content = content
)
}
}
@Composable
fun MyAppTheme(
content: @Composable () -> Unit
) {
// normal Material 3 theme setup, determine light or dark by whatever means
val colors = if (isSystemInDarkTheme()) DarkThemeColors else LightThemeColors
MaterialBridgeTheme(
colorScheme = colors,
typography = MyTypography,
content = content
)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment