@importantimport/material-color-utilities

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 upstream README for more information.

Getting started

1pnpm add @importantimport/material-color-utilities # pnpm
2yarn add @importantimport/material-color-utilities # yarn
3npm i @importantimport/material-color-utilities # npm

1import { Hct } from "@material/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}`);

Theming

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

Troubleshooting

If using node make sure to use the following flag:

node --experimental-specifier-resolution=node