0.3.11749691420393 • Published 10 months ago

@ktibow/material-color-utilities-nightly v0.3.11749691420393

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
10 months ago

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.

0.3.11749691420393

10 months ago

0.3.11749605111371

10 months ago

0.3.11749518720299

10 months ago

0.3.11749432490635

10 months ago

0.3.11749346758920

10 months ago

0.3.11749259362006

10 months ago

0.3.11749172991124

10 months ago

0.3.11749086606923

10 months ago

0.3.11749000271199

10 months ago

0.3.11748913867013

10 months ago

0.3.11748827599657

10 months ago

0.3.11748742368264

10 months ago

0.3.11748742074820

10 months ago

0.3.11748654472570

10 months ago

0.3.11748568069519

10 months ago

0.3.11748493074137

10 months ago

0.3.11748492917055

10 months ago

0.3.11748492638407

10 months ago

0.3.11748492258895

10 months ago

0.3.11748491990533

10 months ago

0.3.11748491394485

10 months ago

0.3.120250529

10 months ago