[website] Fix home page dark mode flicker

[siriwatknp]

Preview: https://deploy-preview-33545--material-ui.netlify.app/

Changes

• Most of the changes are refactoring existing styles to support CSS variables

  // example
  // From
  backgroundColor:
    theme.palette.mode === 'dark'
      ? alpha(theme.palette.primaryDark[900], 0.72)
      : 'rgba(255,255,255,0.72)',
  
  // to
  backgroundColor: 'rgba(255,255,255,0.72)',
  ...theme.applyDarkStyles({
    backgroundColor: alpha(theme.palette.primaryDark[900], 0.72)
  })
  

• Wrap the home page with CssVarsProvider and set CSS variable prefix to --muidocs so that it does not interfere with Material UI demos in the future.

• Theme tokens do not change (copy from the existing implementation)

• Set the storage key to muidocs so that other websites that uses the default values do not alter our docs.

• Add theme.applyDarkStyles() to docs theme: A utility for creating styles for dark mode. It will check the theme CSS variables and apply the proper styles for dark mode.

  e.g.

  theme.applyDarkStyles({
    color: '#fff'
  })
  
  // Result
  // when there are no CSS variables, fallback to object spread
  ...theme.palette.mode === 'dark' && {
    color: '#fff',
  }
  
  // For CSS variables, it uses data attribute
  ':where([data-muidocs-color-scheme="dark"]) &': {
    color: '#fff',
  }
  

  use :where() so that it does not create CSS specificity

• Workaround for :where() selector. This is an existing issue in emotion (as well as styled-components)

---

• [ ] I have followed (at least) the PR section of the contributing guide.

Part of #15588

[mui-bot]

	Messages
:book:	Netlify deploy preview: https://deploy-preview-33545--material-ui.netlify.app/

No bundle size changes

Generated by :no_entry_sign: dangerJS against 6fd075309b31646316fa0caaa624339e7eb0e46c

[siriwatknp]

For the theming, it will be a lot easier if we can use :where([data-joy-color-scheme="dark"]) & to have 0 specificity.

There is a workaround in https://github.com/emotion-js/emotion/issues/2836#issuecomment-1193270671, but it needs a fix to reduce double classname.

[siriwatknp]

@oliviertassinari The https://github.com/mui/material-ui/pull/33261#issuecomment-1267690625 is fixed in this PR.

[siriwatknp]

Something is off, when I open the landing page and change to dark mode and then navigate to Material UI Docs, it is in light mode again

@mnajdova It is fixed, please try again.

[siriwatknp]

Wait for https://github.com/mui/material-ui/pull/34639

[pixelass]

It looks like some styles are not applied correctly in dark mode (Main headline is black instead of white)

via deploy-preview-33545--material-ui.netlify.app
I'm not sure if that preview is still up to date though :)

[siriwatknp]

It looks like some styles are not applied correctly in dark mode (Main headline is black instead of white)

via deploy-preview-33545--material-ui.netlify.app I'm not sure if that preview is still up to date though :)

Could you try it again? I think you got the old deploy preview site.

[siriwatknp]

@mnajdova @oliviertassinari Ready for review!

• No more workaround or temporary hacks because of #34639
• Move paletteMode from cookie to local storage to sync with CssVarsProvider.

[pixelass]

It looks like some styles are not applied correctly in dark mode (Main headline is black instead of white) via deploy-preview-33545--material-ui.netlify.app I'm not sure if that preview is still up to date though :)

Could you try it again? I think you got the old deploy preview site.

I just tested the link in the first comment. I don't see a new link anywhere.

Also this might not even be important I just noticed it along the way. ;)

[siriwatknp]

I just tested the link in the first comment. I don't see a new link anywhere.

It is the same link. I think it just got updated, let me know if it does not work on your side.

[siriwatknp]

Could you rebase on HEAD? I see a few visual differences on the homepage of this PR compared to HEAD that is linked to an older baseline.

One important regression, we should see the default look & feel here: different border-radius compared to the default of Material UI:

the Table below also has an issue with the border color.

One important regression, we should see the default look & feel here: different border-radius compared to the default of Material UI:

This is fixed. The root cause comes from the automatic merging between the upper theme and the local theme. I don't see another way unless forcing vars: null to the createTheme():

<ThemeProvider theme={createTheme({ vars: null })}>

because CssVarsProvider generates a new node (vars) whereas createTheme does not.

[siriwatknp]

The text color is different:

@mnajdova This one is fixed.

[oliviertassinari]

@danilo-leal you might be interested in having a look at the new page, and seeing if there are any tweaks you would like to make.

For example, some of the colors changed to be truer to how it was initially designed: https://www.figma.com/file/4uv2dT18rXJPZBbrbpw61q/Marketing-site?node-id=3224%3A11442.

Before ❌: https://634559a4d8e9450008ca12e0--material-ui-docs.netlify.app/

After ✅: https://634e653c355ff00008613f12--material-ui-docs.netlify.app/

[oliviertassinari]

@siriwatknp There is a regression on Firefox and Safari:

It was reported as a PM https://twitter.com/messages/2927740052-3199492438. It's probably easy to fix, I didn't look.

[siriwatknp]

@siriwatknp There is a regression on Firefox and Safari:

Here is the fix: https://github.com/mui/material-ui/pull/34822. I will do a hotfix deployment.

[danilo-leal]

@oliviertassinari at this point, the website is a truer representation of how the website (at least the main pages) should look like rather than Figma 😬 We'll be actually updating Figma to match with what's in production, but thanks for heads-up!

[cpboyd]

The home page now seems to default to light mode for me, regardless of the system settings.

If I manually use setMode('system'), it applies the expected theme but shouldn't this be the default setting? It seems that systemMode is only defined if the mode is set to 'system'. <CssVarsProvider theme={theme} defaultMode="system"> resolved my expected behavior. Is the home page supposed to default to light mode, regardless of someone's system settings?

[siriwatknp]

You are right! I think the home page should default to system preference. Do you want to submit a PR?

[oliviertassinari]

I can't reproduce https://github.com/mui/material-ui/pull/33545#issuecomment-1288299269 anymore. I assume the bug was fixed, somewhere?

[siriwatknp]

I can't reproduce #33545 (comment) anymore. I assume the bug was fixed, somewhere?

It was fixed in https://github.com/mui/material-ui/pull/35216

[oliviertassinari]

@siriwatknp Great, thanks for the link 👍.

In https://github.com/pacocoursey/next-themes/issues/20#issuecomment-784470942, I see that they changed the default mode config from light to system. This seems a bit backward. It could lead to surprises. Say if as a developer, you only added logic for the light mode. For example with Tailwind CSS https://tailwindcss.com/docs/dark-mode, dark mode only happens if you start to write logic for it. So 👍 to keep light as the default in MUI System.

[paulincai]

At present, from my light mode latest version of Chrome on the mui.com I cannot turn on the dark mode of the website. It goes dark and back to light.

[mnajdova]

At present, from my light mode latest version of Chrome on the mui.com I cannot turn on the dark mode of the website. It goes dark and back to light.

@paulincai please create an issue with a reproduction so that we can see what is the issue.

[paulincai]

@mnajdova as my message says, this is about the main website mui.com. However, since I dropped that comment, the website seems to have been fixed. Switching theme works ok now.