sx prop does not correctly apply theme in nested ThemeProviders with ColorMode

Describe the bug

When having an application that has a nested ThemeProviders with the same theme and color modes but different values, toggling the colorMode changes the colorMode and theme in both the top level and nested theme provider, but when utilizing that theme in the nested component with the sx prop, the wrong colour gets applied.

To Reproduce Here is a simple codesandbox that reproduces the issue. https://codesandbox.io/s/exciting-banzai-hrjom?file=/src/index.js Expected behavior

In the example provided, I would expect the inner components background value for light mode to be “darkcyan”, and it is if you print out the theme object. But when its applied to the div using sx={{ bg: "background" }} it applies “red”.

[hasparus]

@hasparus ?

We could split CollorModeProvider into actual React context provider and consumer? Provide color mode in top level ThemeProvider (from theme-provider package, not core), consume in all ThemeProviders.

[rezavation]

Hi @hasparus , I didn’t get an opportunity to look at this yet. Is there any chance one of the existing maintainers of theme-ui will be able to tackle it?