Two colours in, a whole kit out
You choose the surface and the accent. The kit works out the light side and the dark side of every shadow from the surface.
Set --surface and --accent on the root element. The dark side is the surface with 15% less light, the light side is white, and both are used at the same distance and blur.
Choosing a surface
A surface that is too pale leaves no room for the light side and one that is too deep hides the dark side. Stay in the middle.
What works
- Greys and tinted greys between 85% and 92% lightness.
- One accent with enough contrast to carry white text.
- Text in a dark tone of the surface's own hue.
Checking the result
Every component page has a contrast report. Read dark surfaces before you invert a theme, and see which plans include ready-made themes.