A Compose multiplatform library for generating dynamic Material3 color schemes

by androidexample

A Compose Multiplatform library for creating dynamic Material Design 3 color palettes from any color. Similar to generating a theme from m3.matierial.io.

Platforms

This library is written for Compose Multiplatform, and can be used on the following platforms:

  • Android
  • iOS
  • JVM (Desktop)

A JavaScript (Browser) version is available but untested.

Inspiration

The heart of this library comes from the material-color-utilities repository. It is currently only a Java library, and I wanted to make it available to Kotlin Multiplatform projects. The source code was taken and converted into a Kotlin Multiplatform library.

I also incorporated the Compose ideas from another open source library m3color.

Setup

You can add this library to your project using Gradle.

Multiplatform

To add to a multiplatform project, add the dependency to the common source-set:

kotlin {
    sourceSets {
        commonMain {
            dependencies {
                implementation("com.materialkolor:material-kolor:1.0.0")
            }
        }
    }
}

Single Platform

For an Android only project, add the dependency to app level build.gradle.kts:

dependencies {
    implementation("com.materialkolor:material-kolor:1.0.0")
}

Version Catalog

[versions]
materialKolor = "1.0.0"

[libraries]
materialKolor = { module = "com.materialkolor:material-kolor", version.ref = "materialKolor" }

Usage

To generate a custom ColorScheme you simply need to call dynamicColorScheme() with your target seed color:

@Composable
fun MyTheme(
    seedColor: Color,
    useDarkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colorScheme = dynamicColorScheme(seedColor, useDarkTheme)

    MaterialTheme(
        colors = colorScheme.toMaterialColors(),
        content = content
    )
}

You can also pass in a PaletteStyle to customize the generated palette:

dynamicColorScheme(
    seedColor = seedColor,
    isDark = useDarkTheme,
    style = PaletteStyle.Vibrant,
)

See Theme.kt from the demo for a full example.

Demo

A demo app is available in the demo directory. It is a Compose Multiplatform app that runs on Android, iOS and Desktop.

Note: While the demo does build a Browser version, it doesn’t seem to work. However I don’t know if that is the fault of this library or the Compose Multiplatform library. Therefore I haven’t marked Javascript as supported.

See the README for more information.

License

The module material-color-utilities is licensed under the Apache License, Version 2.0. See their LICENSE and their repository here for more information.

Changes from original source

  • Convert Java code to Kotlin
  • Convert library to Kotlin Multiplatform

For the remaining code see LICENSE for more information.

GitHub

View Github