sx( theme.colorScheme ) wrong

[solar lantern]

as you can see on the screenshot, I am trying to adapt the color using colorScheme, but it's stuck on light, while the outer colorscheme provider correctly switches between light and dark.
[using vite]

[tall flame]

Reproduce in a codesandbox please.

[solar lantern]

there is something wrong with my setup for sure, because it works on a fresh codesandbox.io project

[cold brook]

   <Text
      sx={(theme) => ({
        // subscribe to color scheme changes
        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.blue[0],

      })}
    >
      My custom text
    </Text>

pass your styles in parentheses. do not return the object

[solar lantern]

the notation () => ({}) is equivalent to () => {return {}}

it works by the way, the thing that is not working is that t.colorScheme is always returning light

although the outer colorscheme hook correctly switches between light and dark

[cold brook]

oh I did not know that.thanks by the way

[solar lantern]

if you were only to use () => {}, it would open a new scope and return nothing, the parens "( )" are saying, "hey this is not a new scope by the way, just returning this object"

[solar lantern]

@tall flame I tested it on sandbox and the older version worked properly with dark mode switch but the new one doesn't seem to be working correctly, here you can test it yourself https://codesandbox.io/s/mantine-xxb1nv?file=/src/App.tsx

[tall flame]

A couple of things:

1. You might be confusing useColorScheme which uses a media query to get the OS theme (https://mantine.dev/hooks/use-color-scheme/) with useMantineColorScheme (https://mantine.dev/guides/dark-theme/#colorschemeprovider)
2. You cannot use useMantineColorScheme in the same component that has the <ColorSchemeProvider>. You can only use it in nested components. This is standard for all components that rely on React Contexts. I think this provides the behavior that you are looking for? https://codesandbox.io/s/mantine-forked-4627gz?file=/src/App.tsx

[solar lantern]

@tall flame I think I understand what's the issue, I just copied the example from the documentation and didn't realize that preferredColorScheme is only the initial value, but not the driver.
once you change it to theme={{ colorScheme: preferredColorScheme }} , it works correctly