material-color-utilities

[!IMPORTANT] This is a fork of the original Material Color Utilities repository. It is only intended for making releases of the TypeScript package and will be kept in sync with the upstream repository.

Algorithms and utilities that power the Material Design 3 (M3) color system, including choosing theme colors from images and creating tones of colors; all in a new color space.

See the main README for more information.

Getting started

npm i @poupe/material-color-utilities or yarn add @poupe/material-color-utilities

1import { Hct } from "@poupe/material-color-utilities";
2
3// Simple demonstration of HCT.
4const color = Hct.fromInt(0xff4285f4);
5console.log(`Hue: ${color.hue}`);
6console.log(`Chrome: ${color.chroma}`);
7console.log(`Tone: ${color.tone}`);
8

Theming

1import { argbFromHex, themeFromSourceColor, applyTheme } from "@poupe/material-color-utilities";
2
3// Get the theme from a hex color
4const theme = themeFromSourceColor(argbFromHex('#f82506'), [
5  {
6    name: "custom-1",
7    value: argbFromHex("#ff0000"),
8    blend: true,
9  },
10]);
11
12// Print out the theme as JSON
13console.log(JSON.stringify(theme, null, 2));
14
15// Check if the user has dark mode turned on
16const systemDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
17
18// Apply the theme to the body by updating custom properties for material tokens
19applyTheme(theme, {target: document.body, dark: systemDark});
20

Contributing

This repo is not accepting external contributions, but feature requests and bug reports are welcome on GitHub.