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

[rezavation]

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]

Hi rezaabedian 👋
Thanks for the issue!

[hasparus]

Okay, currently only ColorModeProvider updates its inner emotion context with updated theme, and nested theme providers don't render ColorModeProvider.

We should split providing and consuming, and start respecting the color mode in @theme-ui/theme-provider.

[rezavation]

Any ideas how we can fix it?

[atanasster]

Short of rewriting ColorModeProvider I dont see how to fix it. Hope I am missing something as it looks like a significant work, including avoid cross require and keep backward compatibility (to have one ColorModeProvider that can be inside or outside of (multiple) ThemeProvider).

@hasparus ?

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

[hasparus]

@atanasster @rezaabedian does one of you guys want to work on this?

[rezavation]

Happy to try to help, but will probably need some assistance. @hasparus

[hasparus]

@rezaabedian Sweet! Thanks! Of course, I'm here to help.

Here's ColorModeProvider: https://github.com/system-ui/theme-ui/blob/develop/packages/color-modes/src/index.tsx#L126-L153
And here's the ThemeProvider: https://github.com/system-ui/theme-ui/blob/develop/packages/theme-provider/src/index.ts#L44-L75

• ColorModeProvider now both keeps the state and uses it to affect EmotionContext. I think these are two different responsibilities.
• We'd like nested ThemeProviders respect color mode and affect EmotionContext, but we don't want them to have their own color modes (by default, as nested toggles wouldn't be comfortable).

contributing tips:

As the full repo build takes a while (I'm working on it, but not so trivial) you build only the packages you're changing with

yarn workspace @theme-ui/css prepare

There's just one Jest project in the entire repo, and you run a subset of tests like this:

yarn test css

[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?