MonetCompat
material-color-utilities
MonetCompat | material-color-utilities | |
---|---|---|
9 | 9 | |
177 | 1,487 | |
- | 1.8% | |
1.8 | 2.3 | |
over 2 years ago | 18 days ago | |
Kotlin | Dart | |
MIT License | Apache License 2.0 |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
MonetCompat
-
How to generate Material3 swatches out of an image
There isn't an official way to do this, you'd have to use a third party re-implementation of Monet (the colour library). My own MonetCompat contains code for generating palettes, based on colorkt, but doesn't expose the ability to give it a colour and it give back a palette - it's something I want to add in the future though. Feel free to fork or copy it and take just the code you need to generate one though.
-
'Repainter' will give you full control over Android 12's colors, if Google doesn't break it
Repainter was bypassing the generation code, as you mention, using kdrag0n's recreation of Monet (the same one used in my own MonetCompat - shameless plug for devs - on an app level), and allowed tweaking of the colour generation. Of course you can't do that with a live wallpaper and passing custom colours to the generation, as good as your app is.
-
[DEV] I just released "Karma for Reddit", a Reddit app with"Material You"-inspired dynamic themeing
It's needed because the app reads your wallpaper in order to do the dynamic color theme thing so that the default theme matches your wallpaper color. You can read more about why this is needed in the MonetCompat library and the monet pub package which my app uses under the hood
-
Ready for Android 12? (New Niagara Launcher beta with Material You theming)
The MonetCompat library by /u/Quinny898 , which uses /u/kdrag0n's custom monet implementation, also provides backwards compatibility all the way to Android 5.0 through the Palette API, but the Niagara developers said they opted for the above approach for simplicity.
-
Android 12's wallpaper theming system will go open source in Android 12.1
WallpaperManager has a method to get the wallpaper's colours, it has done since API 27, so it's used for that. I've only ever seen it used in some launchers for UI elements until now. It's actually been possible to do Monet on the app-level for years, even before getWallpaperColors existed - because you've always been able to get the wallpaper as a bitmap and throw it into an extraction engine like Palette. This, combined with kdrag0n's Monet reconstruction, is how my own MonetCompat library works.
-
Material Components 1.5.0-alpha03 · Early access preview of Material 3
Oh and I already wrote a library that does that.
-
Do you know where I can get docs for material you api ?
Someone else has already mentioned my library MonetCompat, but if you want to use the raw colours, they're accessible on Android 12 only, check android.R.color: https://developer.android.com/reference/android/R.color (the system_accent and system_neutral sets are the ones you want)
-
Google Contacts gets first big Material You redesign with Dynamic Color, UI tweaks
Google haven't released related libraries yet but it didn't stop some developers implementing their own that supports older Android versions.
-
Material You APIs?
There's also kdrag0n's reproduction of Monet, and my implementation of it in a library, compatible with Android 5.0+ (shameless plug)
material-color-utilities
-
Built a multiplatform RSS app built using Kotlin and Compose Multiplatform
It was fun learning more about KMM and also trying out Compose for iOS. You can download the app from GitHub Releases (for now Android 12+ because of the unbounded blur any suggestions on how I can get this in a backwards-compatible manner?). Here are a few screenshots showcasing the app. I have used Material You based theming to dynamically theme the app based on the content image, it works on both Android and iOS. For that I had to extract the Material Color Utilities library into a KMM package I can use, you can find it here if you are interested and want to use it.
-
How to generate Material3 swatches out of an image
Checkout Google's material-color-utilities. It can generate an entire color scheme from a single color. You can use AndroidX palette to extract that input color.
-
Is there a library or algorithm to create Material Color Swatches, and primary/accent/custom for color, if possible for Compose, in Android like in Flutter?
Something like this?
-
I created Material 3 UI components library for new Vue 3 from scratch spending 2 months.
Yes this not exact clone of Material 3 spec as I'm not afraid to go towards non-traditional way by removing unneeded things for simplicity. Colors are generated using same new HCT color model algorithm, no difference here. In M3 spec colors are neutral, primary, secondary, tertiary. In mine you can add as many colors you want. So to keep minimal I added preset primary, neutral (mix of secondary and neutral) and leaving the other colors like tertiary(rarely used) on user. Now there is surface varient which is just reference to one of neutral tone not a whole new color. Mine also has surface color. In M3 buttons height 40px that is huge so I kept 36px (M2 spec). M3 typography tokens are display, headline, title, body each has 3 variants large, medium, small. In mine added choosing most used sizes title-large, title, body-small. And which shapes you referring to? Is it that I used Dialog corner 30px radius instead of 28px specified in M3 spec? No issue, I can add options to customize radius for whole UI. Those little changes for simplicity doesn't make it completely unusable app by any means, this is not even a error or accessibility issue like Dialog not closing when Escape pressed. You are dramatizing. And does Material Web Components handles form validation with custom rules, reseting all field values? Does that conditionally renders templates when browser screen breakpoints resized? Can that show stacked dialogs one top of another or handle dark theme? No, because there is reason behind people using Material UI (React) instead of not feature-rich Material Web Components (has React version) just like that mine is way more than only M3 spec built for reactive framework Vue. Material Web Components doesn't support Vue. Here a syntax comparison with Material Web Components that you waiting for. Feels like looking at minified code: Textarea Label
-
Today I finished my portfolio Material 3 components for Vue 3.
If you mean if I customized any existing component library to look like Material 3. No, everything from scratch. Only used one external npm dependency https://github.com/material-foundation/material-color-utilities for HCT color model to generate Monet colors tones. At first I was using native CSS HSL adjusting lightness value, then Google recently released this HCT algorithm and I replaced HSL with HCT as this giving more accurate shade. And I took some inspiration from official Material 3 docs, Flutter Material 3 like https://github.com/flutter/flutter/issues/91605, Material UI (React), Vuetify, Equal UI, Vuesax, Muse UI, PrimeVue, Quasar, Angular Material, Chakra UI (React) and implemented in own new ways. Like the ripple implementation is completely different, improved in mine. Material UI internally usage PopperJS dependency (new name Floating UI) to position Tooltips, Menus https://github.com/mui/material-ui/blob/master/packages/mui-base/package.json#L58. Didn't used Floating UI (minified CDN 10KB) instead I created custom more lightweight (minified 1KB) positioning engine which internally used as Vue composables for now, yet to be documented.
-
Automatic Material You Colors Generator from your wallpaper for the Plasma Desktop (beta)
This is a Python program that uses this C# implementation of Google's Material Color Utilities to extract a color from an image and then generate a Material Design 3 color scheme. Which is used to generate both Light and Dark Color Themes for KDE. Details and Arch PKGBUILD in the GitHub repo.
-
Does anybody know how the new "Material You" pick and generate color palette from a wallpaper? What's happening behind the scene?
Google uploaded source code. Usage new HCT color model. https://github.com/material-foundation/material-color-utilities
-
Material You and Brand Semantic Colors, A Solution
MCU Blend class
-
Semanttic Custom Colors in Material You In FLutter
Material Color Utilties
What are some alternatives?
android12-extensions - Enable and customize hidden features on Android 12.
MaterialColorUtilities - Material You color algorithms for .NET
monet - A flutter library to get wallpaper colors using monet on Android or generate them using a primary color.
kde-material-you-colors - Automatic color scheme generator from your wallpaper for KDE Plasma powered by Material You
material-components-android - Modular and customizable Material Design UI components for Android
SierraBreeze - OSX-like window decoration for KDE Plasma written in C++
MiX-Monet-Generator - Create Monet Theme for MiXplorer (Android)
latte-dock-colored-indicators - Latte Dock indicators that follow icon colors
mordant - Multiplatform text styling for Kotlin command-line applications
Lightly - A modern style for qt applications.
OkHttp - Square’s meticulous HTTP client for the JVM, Android, and GraalVM.
arc-kde - Arc KDE customization