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.