jordond/MaterialKolor

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

The KDoc is published at docs.materialkolor.com

Table of Contents

• Platforms
• Inspiration
• Generating from an Image
• Setup
  • Multiplatform
  • Single Platform
  • Version Catalog
• Usage
• Demo
• License
  • Changes from original source

Platforms

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

• Android
• iOS
• JVM (Desktop)
• JavaScript (Browser)

You can see a demo running at demo.materialkolor.com.

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.

Generating from an Image

You can now generate a dynamic color scheme by using my library kmPalette.

You can get the dominant color from an image, or you can also generate a color palette.

Follow the instructions there to set it up, then as an example. You can use it to generate a color theme from a remote image:

@Composable
fun SampleTheme(
    imageUrl: Url, // Url("http://example.com/image.jpg")
    useDarkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit,
) {
    val networkLoader = rememberNetworkLoader()
    val dominantColorState = rememberDominantColorState(loader = networkLoader)
    LaunchedEffect(imageUrl) {
        dominantColorState.updateFrom(imageUrl)
    }

    AnimatedDynamicMaterialTheme(
        seedColor = dominantColorState.color,
        isDark = useDarkTheme,
        content = content
    )
}

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.2.9")
            }
        }
    }
}

Single Platform

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

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

Version Catalog

[versions]
materialKolor = "1.2.9"

[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.

DynamicMaterialTheme

A DynamicMaterialTheme Composable is also available. It is a wrapper around MaterialTheme that uses dynamicColorScheme() to generate a ColorScheme for you.

Example:

@Composable
fun MyTheme(
    seedColor: Color,
    useDarkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    DynamicMaterialTheme(
        seedColor = seedColor,
        isDark = useDarkTheme,
        content = content
    )
}

Also included is a AnimatedDynamicMaterialTheme which animates the color scheme changes.

See Theme.kt for an example.

Demo

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

Visit demo.materialkolor.com

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.