[system] theme.getColorSchemeSelector is not a function

[mtr1990]

Steps to reproduce 🕹

theme.getColorSchemeSelector("light") or theme.getColorSchemeSelector("dark")

https://codesandbox.io/p/sandbox/gracious-babbage-d8xdpy?file=%2Fsrc%2FDemo.tsx%3A27%2C21-27%2C59

Current behavior 😯

theme.getColorSchemeSelector("light") Doesn't work at root level

but work at a lower level

const theme = useTheme()
theme.getColorSchemeSelector("light") => Work

Expected behavior 🤔

Works at root level like MUI JOY :

https://codesandbox.io/p/sandbox/cool-sun-j6wjvf?file=%2Fsrc%2FDemo.js%3A110%2C71

Context 🔦

No response

Your environment 🌎

No response

[siriwatknp]

This is because getColorSchemeSelector is appended by CssVarsProvider because the function needs attribute from CssVarsProvider's props.

I think we can improve this by delegating the attribute to the extendTheme and set getColorSchemeSelector to the theme. With this, zero-runtime can read and use the attribute internally cc @brijeshb42

[mtr1990]

Thank you for providing feedback.

If we can deliver in extendTheme instead of under CssVarsProvider then customization will be better

Currently I can temporarily rewrite the getColorSchemeSelector function for use:

export function getMode(mode) {
  if (mode === 'light') {
    return `[data-mui-color-scheme="light"] &`;
  }
  return `[data-mui-color-scheme="dark"] &`;
}

But I realized other functions like pallet also don't work inside extendTheme like Mui Joy.

My need is to customize the theme before creating in <CssVarsProvider theme={theme}>

So I need properties like mode (console.log("palette", theme.palette.mode);)

There is also solution for this using global state. But then const { mode, setMode } = useColorScheme(); will lose its meaning and we have to write some extra code to further handle the mode state, which is not necessary

Hopefully this will improve.