Skip to content

Dynamic Material 3 color scheme builder for Compose

License

Notifications You must be signed in to change notification settings

g000sha256/material_color_scheme

Repository files navigation

Dynamic Material 3 color scheme builder for Compose

License License License License License

This library provides a builder for creating dynamic color schemes according to the Material 3 guidelines. You no longer have to export large sets of colors. You can also change the theme of your application in runtime.

Installation

Dependency

implementation("dev.g000sha256:material-color-scheme:1.4.0")

Note

The artifact coordinates have been changed from com.github.g000sha256:material_color_scheme to dev.g000sha256:material-color-scheme

Repository

mavenCentral()

Note

The repository has been changed from maven("https://jitpack.io") to mavenCentral()

Examples

How to build a color scheme using any primary color

val isDark: Boolean = TODO()
val primaryColor: Color = TODO()
val updatedColorScheme = remember(isDark, primaryColor) {
    return@remember buildColorScheme(
        mode = if (isDark) ColorSchemeMode.Dark else ColorSchemeMode.Light,
        primary = primaryColor
    )
}
MaterialTheme(colorScheme = updatedColorScheme) {
    // content
}

How to build a color scheme using custom colors

val isDark: Boolean = TODO()
val primaryColor: Color = TODO()
val secondaryColor: Color = TODO()
val tertiaryColor: Color = TODO()
val neutralColor: Color = TODO()
val neutralVariantColor: Color = TODO()
val errorColor: Color = TODO()
val updatedColorScheme = remember(isDark, primaryColor, secondaryColor, tertiaryColor, neutralColor, neutralVariantColor, errorColor) {
    return@remember buildColorScheme(
        mode = if (isDark) ColorSchemeMode.Dark else ColorSchemeMode.Light,
        primary = primaryColor,
        secondary = secondaryColor,
        tertiary = tertiaryColor,
        neutral = neutralColor,
        neutralVariant = neutralVariantColor,
        error = errorColor
    )
}
MaterialTheme(colorScheme = updatedColorScheme) {
    // content
}

How to override generated colors

val isDark: Boolean = TODO()
val primaryColor: Color = TODO()
val outlineColor: Color = TODO()
val updatedColorScheme = remember(isDark, primaryColor, outlineColor) {
    val scheme = buildColorScheme(
        mode = if (isDark) ColorSchemeMode.Dark else ColorSchemeMode.Light,
        primary = primaryColor
    )
    return@remember scheme.copy(
        outline = outlineColor,
        // override other colors here
    )
}
MaterialTheme(colorScheme = updatedColorScheme) {
    // content
}

How to animate changes

val isDark: Boolean = TODO()
val primaryColor: Color = TODO()
val updatedColorScheme = remember(isDark, primaryColor) {
    return@remember buildColorScheme(
        mode = if (isDark) ColorSchemeMode.Dark else ColorSchemeMode.Light,
        primary = primaryColor
    )
}
val animatedColorScheme = animateColorScheme(updatedColorScheme)
MaterialTheme(colorScheme = animatedColorScheme) {
    // content
}

Color scheme settings

Color scheme settings are valid for 05.05.2024

Hue

P (Primary) S (Secondary) T (Tertiary) N (Neutral) NV (Neutral Variant) E (Error)
Hue - - +60 - - -

Chroma

P (Primary) S (Secondary) T (Tertiary) N (Neutral) NV (Neutral Variant) E (Error)
Chroma 36 16 24 4 8 -

Tone

Dark

Light

Resources

Web pages

Figma

Figma plugins