@material/material-color-utilities
TypeScript icon, indicating that this package has built-in type declarations

0.3.0 • Public • Published

material-color-utilities

npm package

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 @material/material-color-utilities or yarn add @material/material-color-utilities

import { Hct } from "@material/material-color-utilities";

// Simple demonstration of HCT.
const color = Hct.fromInt(0xff4285f4);
console.log(`Hue: ${color.hue}`);
console.log(`Chrome: ${color.chroma}`);
console.log(`Tone: ${color.tone}`);

Theming

import { argbFromHex, themeFromSourceColor, applyTheme } from "@material/material-color-utilities";

// Get the theme from a hex color
const theme = themeFromSourceColor(argbFromHex('#f82506'), [
  {
    name: "custom-1",
    value: argbFromHex("#ff0000"),
    blend: true,
  },
]);

// Print out the theme as JSON
console.log(JSON.stringify(theme, null, 2));

// Check if the user has dark mode turned on
const systemDark = window.matchMedia("(prefers-color-scheme: dark)").matches;

// Apply the theme to the body by updating custom properties for material tokens
applyTheme(theme, {target: document.body, dark: systemDark});

Contributing

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

Package Sidebar

Install

npm i @material/material-color-utilities

Weekly Downloads

21,587

Version

0.3.0

License

Apache-2.0

Unpacked Size

758 kB

Total Files

126

Last publish

Collaborators

  • google-wombot