useRootStyles: false disables whole theme

[pietrofxq]

Describe the bug
When using useRootStyles: false, the default theme is not returned and variables in components do not work. The issue is here:

theme-ui/packages/color-modes/src/custom-properties.ts

Line 78 in 20a2e7e

if (!colors || useRootStyles === false) return {}

I am not sure if we need to check useRootStyles at all here, the documentation says this property is only to avoid applying styles in the html, not that it would prevent the color mode from working

To Reproduce
Steps to reproduce the behavior:

1. set useRootStyles: false in theme
2. try to access a variable in a component, or check the devtools:
   

Expected behavior
useRootStyles: false should not prevent variables from being defined

[hasparus]

What framework are you using?

[pietrofxq]

Developing a chrome extension with react, I used patch-package to make it work correctly by changing this:

-  if (!colors || useRootStyles === false) return {};
+  if (!colors) return {};

   return css({
     ...styles,
-    color: colorToVarValue('text'),
-    bg: colorToVarValue('background')
+   ...(useRootStyles ? {color: colorToVarValue("text"), bg: colorToVarValue('background')} : {})
   })(theme);

[hasparus]

the documentation says this property is only to avoid applying styles in the html, not that it would prevent the color mode from working

Okay, I get it. So this function is used only to affect the global style for html element, which is why it was disabled like that, but you don't have a nested ColorModeProvider so there's nothing providing color variables for you.

It starts working again if you add a nested ThemeUIProvider or turn config.useCustomProperties to false, but it is in fact a bug.

Thanks! Good catch.

CodeSandbox

[hasparus]

@pietrofxq #2519 should solve this.

[pietrofxq]

awesome thank you!