{"id":13659515,"url":"https://github.com/jordond/materialkolor","last_synced_at":"2025-05-15T20:07:37.169Z","repository":{"id":181523413,"uuid":"666878035","full_name":"jordond/MaterialKolor","owner":"jordond","description":"🎨 Generate a dynamic Material3 color sheme from a seed color","archived":false,"fork":false,"pushed_at":"2025-05-06T19:30:43.000Z","size":6327,"stargazers_count":622,"open_issues_count":9,"forks_count":12,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-05-11T09:28:20.199Z","etag":null,"topics":["android","compose","compose-multiplatform","compose-web","kotlin","kotlin-multiplatform","material","material-design","material3"],"latest_commit_sha":null,"homepage":"https://materialkolor.com","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jordond.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-07-15T22:16:56.000Z","updated_at":"2025-05-10T19:27:46.000Z","dependencies_parsed_at":null,"dependency_job_id":"ef4bfb2f-c06f-4fdb-91e1-292d8047ec59","html_url":"https://github.com/jordond/MaterialKolor","commit_stats":null,"previous_names":["jordond/materialkolor"],"tags_count":46,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jordond%2FMaterialKolor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jordond%2FMaterialKolor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jordond%2FMaterialKolor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jordond%2FMaterialKolor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jordond","download_url":"https://codeload.github.com/jordond/MaterialKolor/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254414501,"owners_count":22067272,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","compose","compose-multiplatform","compose-web","kotlin","kotlin-multiplatform","material","material-design","material3"],"created_at":"2024-08-02T05:01:09.618Z","updated_at":"2025-05-15T20:07:32.121Z","avatar_url":"https://github.com/jordond.png","language":"Kotlin","funding_links":[],"categories":["Libraries"],"sub_categories":["🍎 Compose UI"],"readme":"\u003cimg width=\"500px\" src=\"art/materialkolor-logo.png\" alt=\"logo\"/\u003e\n\u003cbr /\u003e\n\n![Maven Central](https://img.shields.io/maven-central/v/com.materialkolor/material-kolor)\n[![Kotlin](https://img.shields.io/badge/kotlin-v2.1.20-blue.svg?logo=kotlin)](http://kotlinlang.org)\n[![Build](https://github.com/jordond/materialkolor/actions/workflows/ci.yml/badge.svg)](https://github.com/jordond/materialkolor/actions/workflows/ci.yml)\n[![License](https://img.shields.io/github/license/jordond/MaterialKolor)](https://opensource.org/license/mit/)\n\n[![Compose Multiplatform](https://img.shields.io/badge/Compose%20Multiplatform-1.6.1-blue)](https://github.com/JetBrains/compose-multiplatform)\n![badge-android](http://img.shields.io/badge/platform-android-6EDB8D.svg?style=flat)\n![badge-ios](http://img.shields.io/badge/platform-ios-CDCDCD.svg?style=flat)\n![badge-desktop](http://img.shields.io/badge/platform-desktop-DB413D.svg?style=flat)\n![badge-js](http://img.shields.io/badge/platform-js%2Fwasm-FDD835.svg?style=flat)\n\nA Compose Multiplatform library for creating dynamic Material Design 3 color palettes from any\ncolor.\n\nCheck out [MaterialKolor Builder](https://materialkolor.com) to see MaterialKolor in action and\ngenerate your own color schemes. It can export to MaterialKolor code, or plain Material 3 code.\n\nThe KDoc is published at [docs.materialkolor.com](https://docs.materialkolor.com)\n\n## Table of Contents\n\n- [Platforms](#platforms)\n- [Inspiration](#inspiration)\n- [Setup](#setup)\n    - [Multiplatform](#multiplatform)\n    - [Single Platform](#single-platform)\n    - [Version Catalog](#version-catalog)\n- [Usage](#usage)\n- [Extensions](#extensions)\n    - [Harmonize Colors](#harmonize-colors)\n    - [Lighten and Darken](#lighten-and-darken)\n    - [Color Temperature](#color-temperature)\n- [Generating from an Image](#generating-from-an-image)\n    - [Advanced](#advanced)\n- [License](#license)\n    - [Changes from original source](#changes-from-original-source)\n\n## Platforms\n\nThis library is written for Compose Multiplatform, and can be used on the following platforms:\n\n- Android\n- iOS\n- JVM (Desktop)\n- JavaScript/wasm (Browser)\n\nYou can see it in action by using [MaterialKolor Builder](https://materialkolor.com).\n\n## Inspiration\n\nThe heart of this library comes from\nthe [material-color-utilities](https://github.com/material-foundation/material-color-utilities)\nrepository. It is currently\nonly a Java library, and I wanted to make it available to Kotlin Multiplatform projects. The source\ncode was taken and converted into a Kotlin Multiplatform library.\n\nI also incorporated the Compose ideas from another open source\nlibrary [m3color](https://github.com/Kyant0/m3color).\n\n## Setup\n\nYou can add this library to your project using Gradle.\n\n### Multiplatform\n\nTo add to a multiplatform project, add the dependency to the common source-set:\n\n```kotlin\nkotlin {\n    sourceSets {\n        commonMain {\n            dependencies {\n                implementation(\"com.materialkolor:material-kolor:2.1.1\")\n            }\n        }\n    }\n}\n```\n\n### Single Platform\n\nFor an Android only project, add the dependency to app level `build.gradle.kts`:\n\n```kotlin\ndependencies {\n    implementation(\"com.materialkolor:material-kolor:2.1.1\")\n}\n```\n\n### Version Catalog\n\n```toml\n[versions]\nmaterialKolor = \"2.1.1\"\n\n[libraries]\nmaterialKolor = { module = \"com.materialkolor:material-kolor\", version.ref = \"materialKolor\" }\n```\n\n## Usage\n\nTo generate a custom `ColorScheme` you simply need to call `dynamicColorScheme()` with your target\nseed color:\n\n```kotlin\n@Composable\nfun MyTheme(\n    seedColor: Color,\n    useDarkTheme: Boolean = isSystemInDarkTheme(),\n    content: @Composable () -\u003e Unit\n) {\n    val colorScheme = rememberDynamicColorScheme(seedColor, useDarkTheme)\n\n    MaterialTheme(\n        colors = colorScheme,\n        content = content\n    )\n}\n```\n\nYou can also pass in\na [`PaletteStyle`](material-kolor/src/commonMain/kotlin/com/materialkolor/PaletteStyle.kt) to\ncustomize the generated palette:\n\n```kotlin\ndynamicColorScheme(\n    seedColor = seedColor,\n    isDark = useDarkTheme,\n    style = PaletteStyle.Vibrant,\n)\n```\n\n### DynamicMaterialTheme\n\nA `DynamicMaterialTheme` Composable is also available. It is a wrapper around `MaterialTheme` that\nuses `dynamicColorScheme()` to generate a `ColorScheme` for you. You can animate the color scheme by\npassing in `animate = true`.\n\nExample:\n\n```kotlin\n@Composable\nfun MyTheme(\n    seedColor: Color,\n    useDarkTheme: Boolean = isSystemInDarkTheme(),\n    content: @Composable () -\u003e Unit\n) {\n    DynamicMaterialTheme(\n        seedColor = seedColor,\n        isDark = useDarkTheme,\n        animate = true,\n        content = content\n    )\n}\n```\n\n## Extensions\n\nIncluded in the library are some extensions for working with colors. You can check out\nthe [/ktx](material-kolor/src/commonMain/kotlin/com/materialkolor/ktx) package for more information.\n\nBut here are a couple useful examples:\n\n### Harmonize Colors\n\nIf you want to harmonize a color with another you can use the `Color.harmonize()` function. You can\nread more about color harmonization on\nthe [Material 3 Documentation](https://m3.material.io/styles/color/advanced/adjust-existing-colors#1cc12e43-237b-45b9-8fe0-9a3549c1f61e).\n\nExample:\n\n```kotlin\nval newColor = MaterialTheme.colorScheme.primary.harmonize(Color.Blue)\n```\n\nThere is an additional function specifically for harmonizing with the primary color:\n\n```kotlin\nval newColor = Color.Blue.harmonizeWithPrimary()\n```\n\n**Note:** `Color.harmonize()` has an optional parameter `matchSaturation` which when set to `true`\nwill adjust the saturation from the other color.\n\n### Lighten and Darken\n\nYou can lighten or darken a color using the `Color.lighten()` and `Color.darken()` functions.\n\nFor example:\n\n```kotlin\nval newColor = MaterialTheme.colorScheme.primary.lighten(0.2f)\n```\n\nCheck out the demo app for a full example.\n\n### Color Temperature\n\nYou can determine if a `Color` is warm or cold using the following:\n\n```kotlin\nval isWarm = MaterialTheme.colorScheme.primary.isWarm()\nval isCold = MaterialTheme.colorScheme.primary.isCold()\n```\n\n## Generating from an Image\n\nYou can calculate a seed color, or colors that are suitable for UI theming from an image. This is\nuseful for generating a color scheme from a user's profile picture, or a background image.\n\nTo do so you can call `ImageBitmap.themeColors()`, `ImageBitmap.themeColor()` or the `@Composable`\nfunction `rememberThemeColors()` or `rememberThemeColor()`:\n\n```kotlin\nfun calculateSeedColor(bitmap: ImageBitmap): Color {\n    val suitableColors = bitmap.themeColors(fallback = Color.Blue)\n    return suitableColors.first()\n}\n```\n\nSee [`ImageBitmap.kt`](material-kolor/src/commonMain/kotlin/com/materialkolor/ktx/ImageBitmap.kt)\nfor more information.\n\nOr in Compose land:\n\n```kotlin\n@Composable\nfun DynamicTheme(image: ImageBitmap, content: @Composable () -\u003e Unit) {\n    val seedColor = rememberThemeColor(image, fallback = MaterialTheme.colorScheme.primary)\n\n    AnimatedDynamicMaterialTheme(\n        seedColor = seedColor,\n        content = content\n    )\n}\n```\n\n### Advanced\n\nFor a more advanced use-case you can use my other\nlibrary [kmPalette](https://github.com/jordond/kmpalette).\n\nYou can get the dominant color from an image, or you can also generate a color palette.\n\nFollow the instructions there to set it up, then as an example. You can use it to generate a color\ntheme from a remote image:\n\n```kotlin\n@Composable\nfun SampleTheme(\n    imageUrl: Url, // Url(\"http://example.com/image.jpg\")\n    useDarkTheme: Boolean = isSystemInDarkTheme(),\n    content: @Composable () -\u003e Unit,\n) {\n    val networkLoader = rememberNetworkLoader()\n    val dominantColorState = rememberDominantColorState(loader = networkLoader)\n    LaunchedEffect(imageUrl) {\n        dominantColorState.updateFrom(imageUrl)\n    }\n\n    AnimatedDynamicMaterialTheme(\n        seedColor = dominantColorState.color,\n        isDark = useDarkTheme,\n        content = content\n    )\n}\n```\n\n## License\n\nThe module `material-color-utilities` is licensed under the Apache License, Version 2.0. See\ntheir [LICENSE](material-color-utilities/src/commonMain/kotlin/com/materialkolor/LICENSE) and their\nrepository [here](https://github.com/material-foundation/material-color-utilities) for more\ninformation.\n\n### Changes from original source\n\n- Convert Java code to Kotlin\n- Convert library to Kotlin Multiplatform\n\nFor the remaining code see [LICENSE](LICENSE) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjordond%2Fmaterialkolor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjordond%2Fmaterialkolor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjordond%2Fmaterialkolor/lists"}