`useColorScheme` should fail when not called under a `ThemeProvider`

[Janpot]

Steps to reproduce

Link to live example: https://codesandbox.io/embed/8clfj3?module=/src/Demo.tsx

Try toggling the theme with the two selects

Current behavior

The first one select box doesn't do anything. There is no feedback to the developer that the first call to useColorScheme will never work.

Expected behavior

The call to useColorScheme errors when there is no theme available.

Context

Potentially what this user ran in to.

Orthogonal issue, but I started from this example. It would be more ergonomic if these were radio buttons, or toggle buttons. It halves the amount of clicks necessary to operate the demo.

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: useColorScheme ThemeProvider