[system] `theme.getColorSchemeSelector` is not a function about material-ui

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