MultiplatformMaterialYou
0.4.0indexedPort of Android's Monet color palette for creating dynamic themes based on system accent colors and dark mode status, with advanced customization options.
22
Stars
—
Used by
dependents
—
Health
/ 100
Multiplatform Material You
A port of Android's Monet color palette to Compose Multiplatform, with built-in functionality for retrieving the system accent color on most platforms.
Compatibility
Multiplatform Material You targets the following platforms:
- Android
- JVM
- Windows 10 and later
- macOS 12 and later
- Linux (KDE, LXDE, partial support for GNOME)
- iOS
- macOS native (untested)
- JS (partial support)
- Web Assembly (partial support)
Installation
Add the dependency to your commonMain source set:
sourceSets {
val commonMain by getting {
dependencies {
implementation("dev.zwander:materialyou:VERSION")
}
}
}
Usage
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.
JS/Web Assembly
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()
}
}
Advanced Usage
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()