Automatic dark theme is not working

[Azq2]

function App() {
	let drawerWidth = 240;

	let prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
	let theme = createMemo(() => {
		console.log('prefersDarkMode=', prefersDarkMode());
		return createTheme({
			palette: {
				mode: prefersDarkMode() ? 'dark' : 'light',
				primary: {
					main: prefersDarkMode() ? '#b39ddb' : '#673ab7',
				},
				secondary: {
					main: prefersDarkMode() ? '#673ab7' : '#651fff',
				},
			},
			typography: {
				fontFamily: [
					'-apple-system',
					'BlinkMacSystemFont',
					'"Segoe UI"',
					'Roboto',
					'"Helvetica Neue"',
					'Arial',
					'sans-serif',
					'"Apple Color Emoji"',
					'"Segoe UI Emoji"',
					'"Segoe UI Symbol"',
				].join(','),
			}
		});
	});

	return (
		<SerialProvider>
			<ThemeProvider theme={theme()}>
				....
			</ThemeProvider>
		</SerialProvider>
	);
}

I see console.log('prefersDarkMode=', prefersDarkMode()); on the console, but the theme is not changed.

[s0ftik3]

Encountered the same issue just recently.
Basically you don't need to use createMemo for theme variable.
Below is the code that worked for me.

const palette = createMemo(() => {
    return createPalette(mode() === 'light' ? light : dark)
})
const theme = createTheme({ palette })
    
<ThemeProvider theme={theme}></...>

yet you can read this to see more details about it.