-
Notifications
You must be signed in to change notification settings - Fork 134
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How can I add to the theme generator the secondary color? #55
Comments
I have been trying to figure this out for way too long. It seems like the two teams (this library and the stub project for the M3 Web Generator) have not collaborated. I am trying to build a Material Theme for my React project which uses MUI. Google search guides you to the M3 Theme Builder, which allows selecting Google search some more and you'll find this library, which has handy functions for building ...no, it isn't. That function only takes one source color. The fact that the 2 best ways to generate Material 3 Themes each take a different approach, and do not even acknowledge each other is super confusing. Digging through the source here, I found the following comment surrounding the main "get a predefined palette from a single color value" function.
...suggesting that the full capability for making a theme just hasn't been implemented yet. I fear it's another case where the marketing Materials are way out ahead of the implementation team. |
I don't think you are supposed to set custom secondary and tertiary colors, but it is totally possible. Just create a CorePalette, override the two tonal palettes and then create a Scheme from it: let corePalette = CorePalette.of(primarySeed);
corePalette.a2 = TonalPalette.fromInt(secondarySeed);
corePalette.a3 = TonalPalette.fromInt(tertiarySeed);
let lightScheme = Scheme.lightFromCorePalette(corePalette);
let darkScheme = Scheme.darkFromCorePalette(corePalette);
let customSecondary = lightScheme.secondary; You can also harmonize the secondary/tertiary seeds so they are closer to the primary seed: let harmonizedSecondarySeed = Blend.harmonize(secondarySeed, primarySeed); |
Thank you!! We are a tiny team of developers trying to quickly grok the new design scheme and there isn't really a central place for this information yet. This is exactly what I was trying to do. |
So this is possible, we use it in the https://m3.material.io/theme-builder and you override these values in the Core Palette not the scheme. You then pass that to the scheme to get the tokens |
This is what I'm proposing in the CorePalette class: ...
/**
* Create a [CorePalette] from a set of colors
*/
static fromColors(colors: CorePaletteColors): CorePalette {
return CorePalette.createPaletteFromColors(false, colors);
}
/**
* Create a content [CorePalette] from a set of colors
*/
static contentFromColors(colors: CorePaletteColors): CorePalette {
return CorePalette.createPaletteFromColors(true, colors);
}
private static createPaletteFromColors(
content: boolean, colors: CorePaletteColors) {
const palette = new CorePalette(colors.primary, content);
if (colors.secondary) {
const p = new CorePalette(colors.secondary, content);
palette.a2 = p.a1;
}
if (colors.tertiary) {
const p = new CorePalette(colors.tertiary, content);
palette.a3 = p.a1;
}
if (colors.error) {
const p = new CorePalette(colors.error, content);
palette.error = p.a1;
}
if (colors.neutral) {
const p = new CorePalette(colors.neutral, content);
palette.n1 = p.n1;
}
if (colors.neutralVariant) {
const p = new CorePalette(colors.neutralVariant, false);
palette.n2 = p.n2;
}
return palette;
}
... |
Landed on typescript:
|
In the M3 Theme Web Generator, it is possible to set not only the primary color but also secondary, tertiary, and neutral.
How can I set them to generate the theme?
This is the current function:
const theme = themeFromSourceColor(argbFromHex(primary), [{},]);
How can I add something like:
const theme = themeFromSourceColor(argbFromHex(primary), argbFromHex(secondary), argbFromHex(tertiary), argbFromHex(error), argbFromHex(neutral), [{},]);
or something similar?
Thanks 🙏
The text was updated successfully, but these errors were encountered: