Input multiple color hex?

[joezappie]

The material theme builder tool allows you to specify the HEX color for primary, secondary, tertiary, error and extended colors. Looking at the material color utilities library I didn't see anyway to specify these when generating the theme.

Does this library support inputting these multiple colors to generate the theme instead of it automatically picking secondary and tertiary?

[joezappie]

Seems like this should be possible using:

const colors = CorePalette.fromColors({
   primary: argbFromHex("#B4D1FC"),
   secondary: argbFromHex("#987BFF"),
   tertiary: argbFromHex("#2692FF"),
   error: argbFromHex("#ED4545"),
   neutral:  argbFromHex("#D1D1D6"),
   neutralVariant:  argbFromHex("#D1D1D6"),
});

Theres no built-in theme utility for using multiple colors, but I think themeFromSourceColor could be easily modified to create a themeFromSourceColors function. The built in CorePalette.forColors function does not generate missing colors, so both palettes would need to be generated and combined.

export function themeFromSourceColors(
    source: CorePaletteColors, customColors: CustomColor[] = []): Theme {

  // Generate palette based on custom input colors
  const customPalette = CorePalette.fromColors({ ... });

  // Generate palette based on primary color
  const autoPalette = CorePalette.of(source.primary);

  // Combine into one palette
  const palette = { ...autoPalette, ...customPalette };

  return {
    source,
    schemes: {
      light: Scheme.light(source),
      dark: Scheme.dark(source),
    },
    palettes: {
      primary: palette.a1,
      secondary: palette.a2,
      tertiary: palette.a3,
      neutral: palette.n1,
      neutralVariant: palette.n2,
      error: palette.error,
    },
    customColors: customColors.map((c) => customColor(source, c)),
  };
}

None of this is tested, just from what I gathered looking through the source code.