Android 12’s dynamic theming could come to more platforms as Google releases the Material Color Utilities library
Google is serious about Material You’s dynamic theming system. The company evidently wants more Android OEMs to offer a theming engine (Monet, or something similar) on Android 12 devices, but that doesn’t seem to be the extent of Google’s plans for its wallpaper-based theming system. The company has now open-sourced the Material Color Utilities code library in an effort to bring the new theming system to more platforms.
In a recent blog post (via 9to5Google), Google’s James O’Leary reveals that Material Color Utilities is a cross-platform code library for color, which includes everything developers would need to implement Material You’s dynamic theming system on various platforms. Currently, the library is available in Dart, Java, and Typescript, but Google plans to bring it to iOS, CSS via SASS, and GLSL shaders. Given that it’s open-source, anyone can contribute to the library.
In addition, the blog post sheds light on exactly how the dynamic theming system works on Android 12. As the post explains, each time you change wallpapers on an Android 12 device:
“First, the wallpaper is quantized, reducing the thousands of colors in it to a smaller number by merging them in color space. The reduced color set is small enough to run statistical algorithms against with efficiency. These algorithms are used to score and filter colors; Android 12 gives color options for colorfulness and how much the image they represent, and it filters out colors close to monochrome.
One color, defaulting to the top-ranked color by the algorithm, or chosen by the user in the wallpaper picker, becomes the source color. Its hue and chroma influence the overall color scheme, enabling a vibrant blue scheme, or a muted green one, based on the user’s choice of color.
Using the source color, we create the core palette, which is a set of 5 tonal palettes. A tonal palette is defined by a hue and chroma; the colors in the palette come from varying tones. These tonal palettes reduce cognitive load for designers when creating a design system: instead of specifying hue and chroma for each role, a tonal palette can be substituted.
Finally, we fill out the table that defines the hue chroma and tone of each color role, then use those values and HCT to create the colors used in the theme.”
Furthermore, the blog post highlights how Google came up with a new HCT (hue, chroma, tone) color system to replace the existing HSL (hue, saturation, lightness) system to make designing with colors easier. You can learn more about this new color system by checking out the original blog post.