ThemeSwitcher icon stuck on LightMode when providing custom themes #5107
Description
Steps to reproduce
Steps:
- Pass in a custom theme to AppProvider (with both light and dark themes defined using createTheme(), with cssVariables set to True)
- Ensure ThemeSwitcher is rendered in the page
- Toggle ThemeSwitcher button
Current behavior
The color mode changes but icon stays stuck on LighModeIcon
Expected behavior
In dark mode the icon should be LightModeIcon. In light mode the icon should be DarkModeIcon.
Context
Looking at the code I noticed that theme.getColorSchemeSelector('dark') gets called in order to determine which icon to show. When passing in a custom theme this function doesn't appear to be defined. When using the default toolpad theme it is defined.
Your environment
Tested in Edge browser
npx @mui/envinfo
System:
OS: Linux 6.6 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
Binaries:
Node: 18.20.8 - /usr/local/bin/node
npm: 10.8.2 - /usr/local/bin/npm
pnpm: Not Found
Browsers:
Chrome: Not Found
npmPackages:
@emotion/react: ^11.14.0 => 11.14.0
@emotion/styled: ^11.14.0 => 11.14.1
@mui/core-downloads-tracker: 7.2.0
@mui/icons-material: ^7.2.0 => 7.2.0
@mui/lab: ^7.0.0-beta.14 => 7.0.0-beta.14
@mui/material: ^7.2.0 => 7.2.0
@mui/private-theming: 7.2.0
@mui/styled-engine: 7.2.0
@mui/system: 7.2.0
@mui/types: 7.4.4
@mui/utils: 7.2.0
@mui/x-data-grid: ^8.8.0 => 8.8.0
@mui/x-date-pickers: 8.9.0
@mui/x-internals: 8.8.0
@toolpad/core: ^0.15.0 => 0.15.0
@toolpad/utils: 0.15.0
@types/react: ^19.0.10 => 19.1.8
react: ^19.0.0 => 19.1.0
react-dom: ^19.0.0 => 19.1.0
styled-components: 6.1.19
typescript: ^5.8.2 => 5.8.3
Search keywords: theme, ThemeSwitcher