InvertedColorScheme cannot be used with SSR

[arturmiglio]

• @freenow/wave version: v2 onwards

What was expected to happen?

Since InvertedColorScheme reads from window it fails when statically or server rendering.

[martimalek]

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...

The current 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)

How does it work?

It basically does 3 things:

• Get and store the current preferred color scheme of the user, it does this by using window.matchMedia to check for matches with the prefers-color-scheme media query
• Listen to changes on the prefers-color-scheme media query and set it's internal state based on that
• Return a wrapper Box which has the class of the inverse color scheme set (effectively applying the inverse color scheme to it's children)

The problem

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.