Changing theme does not change background color when using CSS variables

[Nikhil1920]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Live example links

https://codesandbox.io/s/create-react-app-with-typescript-forked-46llm7?file=/src/index.tsx

https://nikhil1920.github.io/next-js-mui-pwa-starter/

Current behavior 😯

Background color is not changing based on theme

Expected behavior 🤔

Background color should change based on current theme

Context 🔦

No response

Your environment 🌎

No response

[siriwatknp]

You should add CssBaseline to the page.

import CssBaseline from '@mui/material/CssBaseline';

<CssVarsProvider>
  <CssBaseline />
  ...
</CssVarsProvider>

I think this deserves some documentation after #34639 is implemented.

[Nikhil1920]

import from '@mui/material/styles' was giving me
JSX element type 'CssBaseline' does not have any construct or call signatures.ts(2604)
error but the import from "@mui/material/CssBaseline" is working as expected.

[itsajay1029]

Can you assign this issue to me ?

[siriwatknp]

import from '@mui/material/styles' was giving me

`

JSX element type 'CssBaseline' does not have any construct or call signatures.ts(2604)

`

error but the import from "@mui/material/CssBaseline" is working as expected.

👍Yes, you are right! changed to the correct import.

[Kilvny]

a good solution to this for anyone encountering the same problem is Not to create the theme on the fly

here's an example :

    // ! passing this as creating a mode on the fly was resulting in a default dark - light modes from MUI 
    const theme = React.useMemo(
        () =>
            createTheme({
                palette: {
                    mode,
                },
            }),
        [mode],
    );
            <ThemeProvider theme={theme}>
                    <CssBaseline />
                    ...
            </ThemeProvider>

what would you do instead:

    // ! solution is to use the createTheme method with actual themes we created in separate file
    const darkThemeChosen = React.useMemo(
        () =>
            createTheme({
                ...darkTheme
            }),
            [mode]
    )
    const lightThemeChosen = React.useMemo(
        () =>
            createTheme({
                ...lightTheme
            }),
            [mode]
    )

            <ThemeProvider theme={mode === 'dark' ? darkThemeChosen : lightThemeChosen}>
                    <CssBaseline />
                    ...
            </ThemeProvider>

I hope this would be helpful as I faced this problem and resolved it this way