Black and white theme #248
-
|
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. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 5 replies
-
|
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 😄 |
Beta Was this translation helpful? Give feedback.
-
|
Wow, thank you for this update. Looks like exactly what I'm looking for. Will try. Amazing |
Beta Was this translation helpful? Give feedback.
-
|
Looks very good and exactly what I'm looking for. Thank you for this explanation and for your great work here! |
Beta Was this translation helpful? Give feedback.
-
|
By the way and for info FCS 8.0.0 is out as early access as 8.0.0-dev.1 For convenience it has a black and white theme, one with more grey tones, and one with "sepia" tones a brown/yellow warm "monochrome" theme. FlexColorScheme package dev release 8.0.0-dev.1 has been published. This is a BIG update with breaking changes and many new features. It has its own dev pre-release of the Themes Playground as well, feel free to take a look. No new API changes are planned for the stable 8.0.0 release from this dev.1 release. We would appreciate any feedback about found issues from early adopters. FOR INFO there will be no new features or changes in it compared to this one. Only any issues found from the quality assurance will be addressed. The stable release will also include many doc updates, but docs site will continue to be edited and revised AFTER the 8.0.0 stable release. |
Beta Was this translation helpful? Give feedback.
-
|
That looks nice! Will try it. Thanks for your update!!! |
Beta Was this translation helpful? Give feedback.
-
|
And now it is released as 8.0.0 stable |
Beta Was this translation helpful? Give feedback.
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 …