React Material UI - Not possible to use themes other than 'light' and 'dark'?

Question

I am working on a UI using React with Material UI (v5+). In the docs, there is an extendTheme function you can use with CssVarsProvider to inject the MUI colors into CSS. In the docs in the same place, it says You can create unlimited color schemes beyond light and dark..

My usage:

const themes = extendTheme({
  colorSchemes: {
    // basically a clone of light but with the background changed to bright red to make it obvious when it's loaded
    thirdTheme
  }
);

<CssVarsProvider theme={themes}>
... // App here
</CssVarsProvider>

However, when I create a third theme, and call setMode('thirdTheme'), it doesn't update the data-mui-color-scheme on html to be 'thirdTheme'. I know the theme is valid because if I manually update the data tag, then the colors change correctly. I was successfully able to switch between light and dark as well, so my usage of setMode appeared to be correct. I had basically just copied and pasted exactly what was in the docs - see below.

<Button
  onClick={() => {
    setMode(mode === 'thirdTheme'?
      'light'
      : 'thirdTheme');
    }}>
    {mode === 'thirdTheme'?
      'Turn light'
      :'Turn thirdTheme'}
</Button?

No matter what I do, it doesn't seem possible to add themes other than what you set to be light and dark. I even looked into the source code and found a few places where it seemed like it was specifically checking if the theme you tried to set was 'light' or 'dark'.

Am I missing something? Are the docs wrong, or is there some other way you're intended to set the theme to themes other than light and dark?

Edit: Third theme is created with the following -

const tempThemes = extendTheme();
const thirdTheme = _.cloneDeep(tempThemes.colorSchemes.light);
_.merge(thirdTheme.palette, {background: {default: '#ff0000'}});
thirdTheme.palette.mode = 'thirdTheme';

Answer 1

Figured it out by reading the source code for material UI. Figured I'd answer since the solution isn't documented anywhere as far as I could find after several hours of searching. setMode definitely does force the mode you select to be 'light' or 'dark' as I thought. However, you can get an extra function which shortcuts those checks - in the docs, it has the following line:

  const { mode, setMode } = useColorScheme();

There is actually a third return, setColorScheme, that I found in useCurrentColorScheme.js where setMode and mode are returned. This can be taken from the return object:

  const { mode, setMode, setColorScheme } = useColorScheme();

This function will let you set your theme to other themes: useColorScheme('thirdTheme') changes the theme and saves the third theme to local storage as well for when you refresh.