-
-
Notifications
You must be signed in to change notification settings - Fork 32.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
CSS Vars Theme not applying correct styles when using nested/forced color schemes #43824
Comments
@siriwatknp without |
I think that this more of a docs improvement rather than implementation bug. From the usage, it's correct that the color will change based on the It'd be too complex to create a selector that prevent nesting like this. |
I agree the current behaviour is technically "correct", but it's also confusing since one would expect to be able to force a color scheme in certain parts of the DOM tree. So users shouldn't expect to be able to force a color scheme when using raw color values, only when using tokens (CSS vars under the hood), correct? |
Yes, that's totally corect. |
If I'm understanding correctly, should this work if I use I haven't been able to get that to work either. Is there a method of component customization that will allow me to force a color scheme for a DOM sub-tree using CSS vars? |
Steps to reproduce
Link to live example:
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:
Your environment
Browser: Arc (Chromium)
npx @mui/envinfo
Search keywords: theme cssvars
The text was updated successfully, but these errors were encountered: