CssVarsProvider is deprecated but seems to be required to use useColorScheme() when creating a theme with createTheme()

[craig-bowers]

Steps to reproduce

Link to live example: https://stackblitz.com/edit/vitejs-vite-jpbmfh?file=src%2FMuiProvider.tsx

Steps:

1. With <CssVarsProvider> wrapping my <ThemeProviders> everything looks and behaves like it should. Click the "Toggle color scheme" button several times and watch how the scroll bar will change color.
2. Comment out or delete <CssVarsProvider> and I no longer have access to mode from useColorScheme() in my ./themes/index.tsx file. Try clicking the "Toggle color scheme" button several times again and you'll see that the scroll bar colors do not change.

Current behavior

<ThemeProvider> does not have access to mode from useColorScheme() unless it is wrapped with <CssVarsProvider>

Expected behavior

<CssVarsProvider> has been deprecated, so we need a way to dynamically style components such as the MuiCssBaseline based on the current mode.

Context

I want to customize my application theme and components using a custom <ThemeProvider>

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used. (stackblitz.com via Chrome)
  Output from `npx @mui/envinfo` goes here.

System:
    OS: Linux 5.0 undefined
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  Browsers:
    Chrome: Not Found
  npmPackages:
    @emotion/react: ^11.11.4 => 11.13.3 
    @emotion/styled: ^11.11.5 => 11.13.0 
    @mui/core-downloads-tracker:  6.0.2 
    @mui/icons-material: ^6.0.2 => 6.0.2 
    @mui/material: ^6.0.2 => 6.0.2 
    @mui/private-theming:  6.0.2 
    @mui/styled-engine:  6.0.2 
    @mui/system:  6.0.2 
    @mui/types:  7.2.16 
    @mui/utils:  6.0.2 
    @mui/x-data-grid: ^7.15.0 => 7.16.0 
    @mui/x-date-pickers: ^7.5.1 => 7.16.0 
    @mui/x-internals:  7.16.0 
    @types/react: ^18.2.37 => 18.3.5 
    react: ^18.2.0 => 18.3.1 
    react-dom: ^18.2.0 => 18.3.1 
    typescript: ^5.2.2 => 5.5.4

Search keywords: CssVarsProvider, createTheme, useColorScheme, mode, dark mode, ThemeProvider

[mnajdova]

Here is a working example: https://stackblitz.com/edit/vitejs-vite-kghdr6?file=src%2FMuiProvider.tsx,src%2Fthemes%2Findex.tsx I've updated it using the docs:

• https://mui.com/material-ui/customization/css-theme-variables/usage/#light-and-dark-modes
• https://mui.com/material-ui/customization/css-theme-variables/configuration/#toggling-dark-mode-manually

[craig-bowers]

Thanks. You might be on the right track, but your example doesn't work. Check my example again and don't remove <CssVarsProvider>. Toggle color scheme modes and you'll see the scroll bars in my example change colors between orange and grey. In your example when toggling between modes your scroll bars don't change colors (it stays orange). It looks like we lost access to mode again with useColorScheme, and you're still using mode to determine how to style the components. What is the MUI-recommended way to target these? Or is there a way to get mode working? Are we forced to use a css file or css module in MUI v6?

[siriwatknp]

@craig-bowers Thanks for reporting the issue, since v6, CssVarsProvider has been merged into ThemeProvider so you don't need to use it.

You only need a ThemeProvider. Here is a working sandbox: https://stackblitz.com/edit/vitejs-vite-cfwg1p?file=src%2FMuiProvider.tsx,src%2Fthemes%2Findex.tsx.

Remove the useColorScheme and read the theme from the callback of styleOverrides instead. Note that the CssBaseline is the only component with that signature, other components need to specify a slot first before providing a callback.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

We value your feedback @craig-bowers! How was your experience with our support team?
If you could spare a moment, we'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!

[craig-bowers]

@craig-bowers Thanks for reporting the issue, since v6, CssVarsProvider has been merged into ThemeProvider so you don't need to use it.

You only need a ThemeProvider. Here is a working sandbox: https://stackblitz.com/edit/vitejs-vite-cfwg1p?file=src%2FMuiProvider.tsx,src%2Fthemes%2Findex.tsx.

Remove the useColorScheme and read the theme from the callback of styleOverrides instead. Note that the CssBaseline is the only component with that signature, other components need to specify a slot first before providing a callback.

Thank you so much. Not sure if I missed that in the documentation, but this certainly did the trick and it's working again!