Materialkolor

🎨 A Compose multiplatform library for generating dynamic Material3 color schemes from a seed color
Alternatives To Materialkolor
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Material Design Icons49,3313,88491625 days ago12September 02, 2016278apache-2.0
Material Design icons by Google
Awesome React Components39,569
4 days ago5cc0-1.0
Curated List of React Components & Libraries.
Materialize38,8626,3684122 months ago26September 09, 2018797mitJavaScript
Materialize, a CSS Framework based on Material Design
Vuetify38,7566,5412,4575 hours ago561December 06, 2023853mitTypeScript
🐉 Vue Component Framework
Material Design Lite32,2411,9252683 months ago19December 21, 2016409apache-2.0HTML
Material Design Components in HTML/CSS/JS
Quasar24,97832056035 minutes ago370November 29, 2023556mitJavaScript
Quasar Framework - Build high-performance VueJS user interfaces in record time
Mdb Ui Kit23,946911 days ago45December 04, 202315otherSCSS
Bootstrap 5 & Material Design UI KIT
Components23,91820,2424,9652 hours ago422December 07, 20232,053mitTypeScript
Component infrastructure and Material Design components for Angular
React Admin23,5982482423 hours ago302December 04, 2023111mitTypeScript
A frontend Framework for building data-driven applications running on top of REST/GraphQL APIs, using TypeScript, React and Material Design
Fyne22,6852945 hours ago309November 22, 2023646otherGo
Cross platform GUI toolkit in Go inspired by Material Design
Alternatives To Materialkolor
Select To Compare


Alternative Project Comparisons
Readme
logo

Maven Central Kotlin Build License

Compose Multiplatform badge-android badge-ios badge-desktop badge-js

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

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

  • Android
  • iOS
  • JVM (Desktop)
  • JavaScript/wasm (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.

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

Single Platform

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

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

Version Catalog

[versions]
materialKolor = "1.4.0-rc03"

[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 = rememberDynamicColorScheme(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.

Extensions

Included in the library are some extensions for working with colors. You can check out the /ktx package for more information.

But here are a couple useful examples:

Harmonize Colors

If you want to harmonize a color with another you can use the Color.harmonize() function. You can read more about color harmonization on the Material 3 Documentation.

Example:

val newColor = MaterialTheme.colorScheme.primary.harmonize(Color.Blue)

There is an additional function specifically for harmonizing with the primary color:

val newColor = Color.Blue.harmonizeWithPrimary()

Note: Color.harmonize() has an optional parameter matchSaturation which when set to true will adjust the saturation from the other color.

Lighten and Darken

You can lighten or darken a color using the Color.lighten() and Color.darken() functions.

For example:

val newColor = MaterialTheme.colorScheme.primary.lighten(0.2f)

Check out the demo app for a full example.

Color Temperature

You can determine if a Color is warm or cold using the following:

val isWarm = MaterialTheme.colorScheme.primary.isWarm()
val isCold = MaterialTheme.colorScheme.primary.isCold()

Generating from an Image

You can calculate a seed color, or colors that are suitable for UI theming from an image. This is useful for generating a color scheme from a user's profile picture, or a background image.

To do so you can call ImageBitmap.themeColors(), ImageBitmap.themeColor() or the @Composable function rememberThemeColors() or rememberThemeColor():

fun calculateSeedColor(bitmap: ImageBitmap): Color {
  val suitableColors = bitmap.themeColors(fallback = Color.Blue)
  return suitableColors.first()
}

See ImageBitmap.kt for more information.

Or in Compose land:

@Composable
fun DynamicTheme(image: ImageBitmap, content: @Composable () -> Unit) {
  val seedColor = rememberThemeColor(image, fallback = MaterialTheme.colorScheme.primary)

  AnimatedDynamicMaterialTheme(
    seedColor = seedColor,
    content = content
  )
}

Advanced

For a more advanced use-case you can use my other 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
  )
}

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.

Popular Material Projects
Popular Material Design Projects
Popular User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Kotlin
Material
Material Design