0.2.2-alpha.0 • Published 1 year ago
@importantimport/material-color-utilities v0.2.2-alpha.0
@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
pnpm add @importantimport/material-color-utilities # pnpm
yarn add @importantimport/material-color-utilities # yarn
npm i @importantimport/material-color-utilities # npm
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 '@importantimport/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 })
Troubleshooting
If using node make sure to use the following flag:
node --experimental-specifier-resolution=node
0.2.2-alpha.0
1 year ago
0.2.1
1 year ago
0.2.1-alpha.0
1 year ago
0.2.0
2 years ago
0.2.0-alpha.0
2 years ago