
Port of Android's Monet color palette for creating dynamic themes based on system accent colors and dark mode status, with advanced customization options.
A port of Android's Monet color palette to Compose Multiplatform, with built-in functionality for retrieving the system accent color on most platforms.
Multiplatform Material You targets the following platforms:
Add the dependency to your commonMain source set:
sourceSets {
val commonMain by getting {
dependencies {
implementation("dev.zwander:materialyou:VERSION")
}
}
}The most basic usage simply involves replacing usages of MaterialTheme {} with DynamicMaterialTheme {} in your code.
@Composable
fun App() {
DynamicMaterialTheme {
Surface {
//...
}
}
}The library will attempt to automatically retrieve the system accent color and dark mode status and generate a theme from those values.
The JS and Web Assembly targets assume a web environment, which doesn't allow direct retrieval of the system accent color due to fingerprinting concerns.
This means Multiplatform Material You can't automatically determine which color to use. As a workaround, you can specify LocalAccentColor on these platforms yourself.
@Composable
fun Main() {
val accentColor = // Hardcoded, from a user preference, etc.
CompositionLocalProvider(
LocalAccentColor provides accentColor,
) {
App()
}
}The Composable function rememberThemeInfo() is also available in the common target to let you directly retrieve the base color scheme and whether the system is in dark mode.
If you want even more control, you can create an instance of ColorScheme() directly yourself, providing an ARGB color integer and whether you want dark mode or not. You can also optionally provide a Style to ColorScheme to change how it generates the palette.
val seedColor = Color(100, 255, 0).toArgb()
val isDark = isSystemInDarkTheme()
val colorScheme = ColorScheme(
seedColor = seedColor,
isDark = isDark,
style = Style.SPRITZ, // optional
contrast = 0.0 // optional, between -1 and 1
)
val composeColorScheme = colorScheme.toComposeColorScheme()A port of Android's Monet color palette to Compose Multiplatform, with built-in functionality for retrieving the system accent color on most platforms.
Multiplatform Material You targets the following platforms:
Add the dependency to your commonMain source set:
sourceSets {
val commonMain by getting {
dependencies {
implementation("dev.zwander:materialyou:VERSION")
}
}
}The most basic usage simply involves replacing usages of MaterialTheme {} with DynamicMaterialTheme {} in your code.
@Composable
fun App() {
DynamicMaterialTheme {
Surface {
//...
}
}
}The library will attempt to automatically retrieve the system accent color and dark mode status and generate a theme from those values.
The JS and Web Assembly targets assume a web environment, which doesn't allow direct retrieval of the system accent color due to fingerprinting concerns.
This means Multiplatform Material You can't automatically determine which color to use. As a workaround, you can specify LocalAccentColor on these platforms yourself.
@Composable
fun Main() {
val accentColor = // Hardcoded, from a user preference, etc.
CompositionLocalProvider(
LocalAccentColor provides accentColor,
) {
App()
}
}The Composable function rememberThemeInfo() is also available in the common target to let you directly retrieve the base color scheme and whether the system is in dark mode.
If you want even more control, you can create an instance of ColorScheme() directly yourself, providing an ARGB color integer and whether you want dark mode or not. You can also optionally provide a Style to ColorScheme to change how it generates the palette.
val seedColor = Color(100, 255, 0).toArgb()
val isDark = isSystemInDarkTheme()
val colorScheme = ColorScheme(
seedColor = seedColor,
isDark = isDark,
style = Style.SPRITZ, // optional
contrast = 0.0 // optional, between -1 and 1
)
val composeColorScheme = colorScheme.toComposeColorScheme()