importantimport
MCU Extra
Additional packages to add new features and bug fixes to Material Color Utilities.
Install
@material/material-color-utilitesis the peer dependency for this package.
pnpm add mcu-extra @material/material-color-utilities # pnpm
yarn add mcu-extra @material/material-color-utilities # yarn
npm i mcu-extra @material/material-color-utilities # npmUsage
Just use it as usual, but import the available utils from mcu-extra.
Theming
import { argbFromHex } from '@material/material-color-utilities'
import { applyTheme, themeFromSourceColor } from 'mcu-extra'
// 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})Documentation
View the documentation here: https://importantimport.github.io/mcu-extra/
It is automatically generated on update using api-extractor and api-documenter.
Comparison
@material/material-color-utilities
Features
themeFromSourceColor & themeFromImage:- Migrated to the new
DynamicSchemewith support for Tone-based Surfaces (surface-container-*) and Add-ons (*-fixed, *-fixed-variant, *-fixed-dim). - Selectable variants and contrast level
- Migrated to the new
applyTheme: Selectable color formats
Changes
applyTheme: Set without suffix variables only whenbrightnessSuffixisfalse
Bug fixes
applyTheme: Remove unwanted additional paletteKey property from color token with paletteTones (https://github.com/material-foundation/material-color-utilities/pull/93)
@importantimport/material-color-utilities
Since upstream was completely unavailable at the time, I created and maintained @importantimport/material-color-utilities.
But it was always a pain to keep the fork updated with the upstream, so now that importing is no longer an issue I recreated an additional package mcu-extra.
You can get new Tone-based Surfaces, but they are no longer exported as CommonJS.
Contributing
Welcome to contribute! For major improvements, please open an issue for discussion first.