Open arturmiglio opened 1 month ago
I initially thought this would be simple, but after taking a better look it seems quite complex, I'll write a bit of context here so it's easier to pick up in the future...
InvertedColorScheme
Essentially it's a wrapper component that sets the color scheme of it's children to the inverse of the preferred color scheme of the user (e.g. if the user prefers light-scheme
it will set it's children to dark-scheme
)
It basically does 3 things:
Box
which has the class of the inverse color scheme set (effectively applying the inverse color scheme to it's children)When rendering on the server side we don't have the window
object and it's APIs, so we can't check media queries. We need a way to know which color scheme the user prefers, this article by Josh Comeau offers some insights into how this may be accomplished for a specific project and some more context around the problem.
@freenow/wave
version: v2 onwardsWhat was expected to happen?
Since
InvertedColorScheme
reads fromwindow
it fails when statically or server rendering.