Color modes not using CSS custom properties

Looking at the code I see that to set the color mode, it relies on the emotion theme provider:

https://github.com/system-ui/theme-ui/blob/6d9e29369a76c2802a1bb8253efaef072a087fbc/packages/color-modes/src/index.tsx#L111-L117

This generates unnecessary class names in order to change the color even though all the custom props are in DOM:

I’ve build a quick experiment where I’m relying on changing only the className of the body element and it works as expected without any additional re-rendering caused by emotion.

I’m wondering if the current behavior is intentional and what’s the motivation to rely on have JS runtime for changing color mode?

[atanasster]

@okonet - got and i believe your issue would be fixed by #1327 - where the css custom variables are only updated on the body tag. This way the individual components styles should not change and emotion should not create new classes on color mode change.

we would really appreciate if you can try it out and let us know, i haven’t specifically done the tests that you have

[okonet]

@atanasster hmm, let me try the latest beta. I’m on the latest stable version: 3.5.0 and this is still an issue.

I do understand why you’d like to rely on the React context here, but I also am confused why is there the need to pre-render all CSS custom properties then. That’s why I raised this question. To me having them in DOM should eliminate the need to rely on the context but it looks like I’m mistaken?