Skip to content
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

Dark theme instability #24252

Closed
fosteman opened this issue Jan 3, 2021 · 3 comments
Closed

Dark theme instability #24252

fosteman opened this issue Jan 3, 2021 · 3 comments
Labels
status: waiting for author Issue with insufficient information

Comments

@fosteman
Copy link

fosteman commented Jan 3, 2021

I have just followed through instructions

  • [X ] The issue is present in the latest release.
  • [ X] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

While in Dark mode, some components update (routine state change) Cards switch back to light and then to black after a while (non-deterministic, sometimes it's 1 second, sometimes it's when I change the state again or click on an empty space on the page).

Kapture.2021-01-03.at.09.32.27.mp4

Before and after clicking on update. This style sheet "flickers".
Screen Shot 2021-01-03 at 9 57 02 AM
Screen Shot 2021-01-03 at 9 56 50 AM

Codebase

Screen Shot 2021-01-03 at 10 00 32 AM

Your Environment 🌎

  System:
    OS: macOS 11.1
  Binaries:
    Node: 14.15.3 - /usr/local/bin/node
    Yarn: Not Found
    npm: 6.14.9 - /usr/local/bin/npm
  Browsers:
    Chrome: 87.0.4280.88
    Edge: Not Found
    Firefox: Not Found
    Safari: 14.0.2
  npmPackages:
    @material-ui/core: ^4.11.0 => 4.11.2 
    @material-ui/icons: ^4.9.1 => 4.11.2 
    @material-ui/lab: ^4.0.0-alpha.55 => 4.0.0-alpha.57 
    @material-ui/pickers: ^3.2.10 => 3.2.10 
    @material-ui/styles:  4.11.2 
    @material-ui/system:  4.11.2 
    @material-ui/types:  5.1.0 
    @material-ui/utils:  4.11.2 
    @types/react: ^17.0.0 => 17.0.0 
    react: ^16.14.0 => 16.14.0 
    react-dom:  16.14.0 
    typescript:  3.5.3 
@fosteman fosteman added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Jan 3, 2021
@oliviertassinari oliviertassinari added status: waiting for author Issue with insufficient information and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Jan 3, 2021
@oliviertassinari
Copy link
Member

Please provide a minimal reproduction test case with the latest version (v5). This would help a lot 👷 .
A live example would be perfect. This codesandbox.io template may be a good starting point. Thank you!

@luminaxster
Copy link
Contributor

Note: This is just a quick check, please follow @oliviertassinari recommendations.
This behavior reminds me of something that happened to me a while ago, perhaps is related to what @eps1lon once help me out with, replace your media query line with this one:

 const prefersLightMode = useMediaQuery('(prefers-color-scheme: light)', {noSsr: true});

By the way, if you are using MUI v5, change the prop type to mode in your palette object.

@oliviertassinari
Copy link
Member

@luminaxster Regarding your very point, we track this problem in #15588.

@fosteman fosteman closed this as completed Jan 5, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
status: waiting for author Issue with insufficient information
Projects
None yet
Development

No branches or pull requests

3 participants