I have been working on a project where I am utilizing the Material Design Color Utilities package to generate a dynamic color theme based on a primary color. However, I have encountered an issue where the generated colors are not matching my expectations.
Below is the snippet of my current code:
import { argbFromHex, hexFromArgb, TonalPalette, themeFromSourceColor, applyTheme, Theme } from "@material/material-color-utilities";
const baseColors = {
primary: '#000000',
secondary: '#FCE800',
tertiary: '#00BFFF',
error: '#F00F3E',
neutral: '#6F7B80',
neutralVariant: '#7B7768'
};
const createTheme = (): Theme => {
const primaryArgb = argbFromHex(baseColors['primary']);
const secondaryArgb = argbFromHex(baseColors['secondary']);
const tertiaryArgb = argbFromHex(baseColors['tertiary']);
const errorArgb = argbFromHex(baseColors['error']);
const neutralArgb = argbFromHex(baseColors['neutral']);
const neutralVariantArgb = argbFromHex(baseColors['neutralVariant']);
const theme = themeFromSourceColor(primaryArgb);
return {
source: primaryArgb,
schemes: theme.schemes,
palettes: {
primary: TonalPalette.fromInt(primaryArgb),
secondary: TonalPalette.fromInt(secondaryArgb),
tertiary: TonalPalette.fromInt(tertiaryArgb),
neutral: TonalPalette.fromInt(neutralArgb),
neutralVariant: TonalPalette.fromInt(neutralVariantArgb),
error: TonalPalette.fromInt(errorArgb),
},
customColors: [],
};
};
/*Overwrite mui system colors*/
const applyThemeVars = (root: HTMLElement, isDarkMode: boolean, theme: any) => {
const style = root.style;
const colors = isDarkMode ? theme.schemes.dark : theme.schemes.light;
Object.entries(colors.props).forEach(([key, value]) => {
const hexColor = hexFromArgb(value as number);
style.setProperty(`--md-sys-color-${key}`, hexColor);
});
};
const applyCustomTheme = (isDarkMode: boolean) => {
const generatedTheme = createTheme();
applyThemeVars(document.documentElement, isDarkMode, generatedTheme);
applyTheme(generatedTheme, { target: document.documentElement, dark: isDarkMode });
};
export const ThemeHelper = () => {
return {
applyCustomTheme,
};
};
const themeHelper = ThemeHelper();
export default themeHelper;
My challenge lies in using themeFromSourceColor where the generated primary color appears as dark violet (#984061) instead of black (#000000) as intended.
Packages: https://github.com/material-components/material-web#readme https://github.com/material-foundation/material-color-utilities
Question: Why does themeFromSourceColor produce a dark violet shade instead of black? How can I ensure that the generated primary color matches my specified color precisely?