CSS selector from theme.applyStyles does not work with forced color scheme #43824
Description
Steps to reproduce
Link to live example:
- Github: https://github.com/rossipedia/mui-css-vars
- Stackblitz: https://stackblitz.com/~/rossipedia/mui-css-vars
Steps:
Use the toggle button group to switch between light and dark mode
Current behavior
The button labeled "LIGHT" switches its text color from black to white.
Expected behavior
The "LIGHT" button should not change its text color when switching themes.
Context
The docs say you should be able to force a specific color scheme by applying the configured selector to a parent element:
To force a specific color scheme for some part of your application, set the selector to the component or HTML element directly.
Your environment
Browser: Arc (Chromium)
npx @mui/envinfo
System:
OS: macOS 15.0
Binaries:
Node: 22.8.0 - ~/.local/state/fnm_multishells/34387_1726794020155/bin/node
npm: 10.8.2 - ~/.local/state/fnm_multishells/34387_1726794020155/bin/npm
pnpm: 9.6.0 - ~/.local/state/fnm_multishells/34387_1726794020155/bin/pnpm
Browsers:
Chrome: 128.0.6613.138
Edge: 129.0.2792.52
Safari: 18.0
npmPackages:
@emotion/react: ^11.13.3 => 11.13.3
@emotion/styled: ^11.13.0 => 11.13.0
@mui/material: 6.1.1 => 6.1.1
@types/react: ^18.3.8 => 18.3.8
react: ^18.3.1 => 18.3.1
react-dom: ^18.3.1 => 18.3.1
typescript: ^5.6.2 => 5.6.2
Search keywords: theme cssvars