theme.palette not update after change mode #5111
Description
Steps to reproduce
Hi
I Use Toolpad and NextAppProvider in _app.js mui v 7
`export default function MyApp(props) {
const {Component, pageProps} = props;
return (
<AppCacheProvider {...props}>
<Head>
<meta name="viewport" content="initial-scale=1, width=device-width"/>
</Head>
<CacheProvider value={cacheRtl}>
<NextAppProvider theme={theme}>
<CssBaseline/>
<CookiesProvider defaultSetOptions={{path: '/'}}>
<LocalizationProvider dateAdapter={AdapterDateFnsJalali} adapterLocale={faIR}>
<MainContextProvider>
<BusinessesContextProvider>
<MainLayout>
<Component {...pageProps} />
</MainLayout>
</BusinessesContextProvider>
</MainContextProvider>
</LocalizationProvider>
</CookiesProvider>
</NextAppProvider>
</CacheProvider>
</AppCacheProvider>
);
}`
But in Components After Change Mode between light and dark, Palette not update and always return light.
`
const theme = useTheme()
const {mode} = useColorScheme();
useEffect(() => {
console.log(mode)
console.log(theme.palette)
}, [mode]);
`
my theme.js:
`const theme = createTheme({
direction: 'rtl',
cssVariables: {
colorSchemeSelector: 'data-toolpad-color-scheme',
},
colorSchemes: {
light: {
palette: {
mode: 'light',
primary: {
main: '#b91f78',
dark: '#343a50',
darker: '#1f2233',
light: '#5b6485',
lighter: '#b0b9e1',
contrastText: '#fff'
},
},
}
, dark: {
palette: {
mode: 'dark',
primary: {
main: '#49516c',
dark: '#848eb4',
darker: '#1f2233',
light: '#343a50',
lighter: '#747fa4',
contrastText: '#fff'
},
},
}
},
typography: {
},
components: {
},
}, faIR)
export default theme;`
Current behavior
No response
Expected behavior
No response
Context
No response
Your environment
npx @mui/envinfo
Don't forget to mention which browser you used.
Output from `npx @mui/envinfo` goes here.
Search keywords: palette mode