Black and white theme

[avantgarde0707]

How can I create only black and white theme? Using predefined theme like "High contrast" don't give me expected results. Except error I would like to have everything else in BW colors.

[rydmike]

Hi @avantgarde0707,

Thanks for your question. Here are some options.

To make custom color scheme, first go to the last scheme and start adjusting it:

For a black and white theme, make primary black in light mode:

Then if we are lazy, choose to use only primary color, this will compute the other colors as grey scale versions (when not using a seeded scheme):

That pretty much gives you a black and white grey scale light theme already with just primary defined as black.

Sure it has grey scale for other colors, you can of course opt to keep input colors at 6 colors and defined all the other main colors as pure black too, or other darker greys.

You will need some monochrome greys in there for some widgets to look nice, typically on container colors, just black and white will not be so brilliant for some widgets, like eg Chips that gets faulty contrast color then, but sure doable, here just to show it:

You can also use these colors as input color to make a "Seed Generated" balanced greyscale Colorscheme that gets more usable greys without any chroma. Let's try that too.

We need to use all key colors, to seed, our blacks for primary, secondary and tertiary, then lock them to their black inputs and we should also use the chroma seed generation, which since inputs have no chroma will then become greyscale.

We also need to set surface tint to white, and we can lock a bunch of other tones black/white too, or keep them to greyscale tones if you want. Here I changed them black/whites for more contrasty look with surface and on colors:

This gives us a "black and white" theme that has good greys that work well with Material-3 component's default color mappings from the Colorscheme:

.

Obviously for the dark theme we will need to do the same, but using white as our main color:

Same idea:

This gives us pretty decent "black and white" M3 widgets:

---

For some components that by default map to container colors that are now greys, you can change them to use eg Primary, for example the FAB:

---

In coming version 8, there will be some built in quick choice to produce a nice monochrome theme like above, but it is already very doable, just a bit tricky.

A monochrome theme can be very nice for protyping without any colors, so e.g. test users focus on features, layout, and interactions first and not the bloody colors 😄

[avantgarde0707]

Wow, thank you for this update. Looks like exactly what I'm looking for. Will try. Amazing

[avantgarde0707]

Looks very good and exactly what I'm looking for. Thank you for this explanation and for your great work here!