[website] Fix home page dark mode flicker #33545

siriwatknp · 2022-07-17T10:08:04Z

Before: https://master--material-ui.netlify.app/
After: 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)
})

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

This utility is specific to our docs because there are pages that are not wrapped with CssVarsProvider. This way developers (us) don't need to write both syntaxes to apply dark mode styles.
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)
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

…/home-improve

… into docs/home-improve

…/home-improve

siriwatknp · 2022-10-17T09:41:43Z

The text color is different:

@mnajdova This one is fixed.

mnajdova

Oh yeah 🎉

oliviertassinari · 2022-10-18T10:43:52Z

docs/src/components/showcase/ThemeChip.tsx

-        <Chip label="JavaScript" onDelete={() => {}} />
-      </Stack>
-    </ThemeProvider>
+          }),
+      ]}
+    >
+      <Chip label="React" color="primary" onDelete={() => {}} />
+      <Chip label="Javascript" onDelete={() => {}} />


There is a small regression on this one, fixed in 31eeb83.

oliviertassinari · 2022-10-18T10:57:13Z

@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 · 2022-10-18T20:13:38Z

@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 · 2022-10-19T07:03:24Z

@siriwatknp There is a regression on Firefox and Safari:

Here is the fix: #34822. I will do a hotfix deployment.

danilo-leal · 2022-10-21T04:36:03Z

@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 · 2022-10-24T01:50:49Z

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 · 2022-10-24T08:53:37Z

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

oliviertassinari · 2022-11-30T17:05:03Z

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

siriwatknp · 2022-12-01T03:41:53Z

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

It was fixed in #35216

oliviertassinari · 2022-12-01T17:48:35Z

@siriwatknp Great, thanks for the link 👍.

In pacocoursey/next-themes#20 (comment), 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 · 2022-12-08T09:17:27Z

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 · 2022-12-13T14:10:29Z

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 · 2022-12-14T12:26:16Z

@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.

siriwatknp added 30 commits July 7, 2022 09:28

create BrandingCssVarsProvider

25cee16

replace with Css vars

048c826

update task card

f9faf82

add resolveTheme prop

7ed9c48

use CSS variables in Button theme

7c70d83

Merge branch 'master' of https://github.com/mui/material-ui into docs…

ca526f6

…/home-improve

add getInitColorSchemeScript to index

9ae7cb5

adjust ssr toggle mode

1ddc314

fix display1 color

0e838bf

update IconButton branding theme

fdc2244

update Menu branding theme

6980915

update Popover branding theme

ca82846

update Divider, Link brandingTheme

46b015f

update Chip, TableCell, ToggleButtonGroup branding theme

0f51305

update ToggleButton branding theme

6221a07

update Switch, Pagination branding theme

3307249

add getMuiInitColorSchemeScript to _document

84d9e39

update AppHeader

6203813

update Paper theme

c9364f2

fix button theme

eec0711

update homepage theme

0f868bc

use callback syntax

bcf5bdd

remove theme argument

c428aa2

remove resolveTheme from prop

2b83a8d

Merge branch 'master' of https://github.com/mui/material-ui into docs…

eca4e88

…/home-improve

fix types

06103a0

update ThemeToggleButton

cd73a4c

update ThemeSwitch

8acdb09

update ThemeChip

a4ff446

update ThemeTimeline

4b6dc1e

siriwatknp added 4 commits October 16, 2022 09:55

use applyDarkStyles

fc7e12a

Merge branch 'docs/home-improve' of github.com:siriwatknp/material-ui…

f51f4d4

… into docs/home-improve

fix lint

adfbbd3

Merge branch 'master' of https://github.com/mui/material-ui into docs…

ff770b0

…/home-improve

fix unsupported arg

6fd0753

siriwatknp requested review from mnajdova and removed request for danilo-leal October 17, 2022 12:18

mnajdova approved these changes Oct 17, 2022

View reviewed changes

siriwatknp merged commit 906b0d4 into mui:master Oct 18, 2022

oliviertassinari reviewed Oct 18, 2022

View reviewed changes

siriwatknp mentioned this pull request Oct 19, 2022

[website] Replace initial value with theme white #34822

Merged

1 task

siriwatknp mentioned this pull request Oct 25, 2022

Migrate all website pages to use CSS theme variables #34880

Closed

10 tasks

This was referenced Oct 30, 2022

[docs] Fix missing emotion prefixes #34958

Merged

[core] Create the docs theme once #34954

Merged

[website] Migrate Pricing page to use CSS theme variables #34917

Merged

daniel-rabe pushed a commit to daniel-rabe/material-ui that referenced this pull request Nov 29, 2022

[website] Fix home page dark mode flicker (mui#33545)

0e637c1

feliperli pushed a commit to jesrodri/material-ui that referenced this pull request Dec 6, 2022

[website] Fix home page dark mode flicker (mui#33545)

887d776

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[website] Fix home page dark mode flicker #33545

[website] Fix home page dark mode flicker #33545

siriwatknp commented Jul 17, 2022 •

edited by oliviertassinari

Loading

siriwatknp commented Oct 17, 2022

mnajdova left a comment

oliviertassinari Oct 18, 2022

oliviertassinari commented Oct 18, 2022

oliviertassinari commented Oct 18, 2022 •

edited

Loading

siriwatknp commented Oct 19, 2022 •

edited by oliviertassinari

Loading

danilo-leal commented Oct 21, 2022

cpboyd commented Oct 24, 2022 •

edited by oliviertassinari

Loading

siriwatknp commented Oct 24, 2022

oliviertassinari commented Nov 30, 2022 •

edited

Loading

siriwatknp commented Dec 1, 2022

oliviertassinari commented Dec 1, 2022 •

edited

Loading

paulincai commented Dec 8, 2022

mnajdova commented Dec 13, 2022

paulincai commented Dec 14, 2022

[website] Fix home page dark mode flicker #33545

[website] Fix home page dark mode flicker #33545

Conversation

siriwatknp commented Jul 17, 2022 • edited by oliviertassinari Loading

Changes

siriwatknp commented Oct 17, 2022

mnajdova left a comment

Choose a reason for hiding this comment

oliviertassinari Oct 18, 2022

Choose a reason for hiding this comment

oliviertassinari commented Oct 18, 2022

oliviertassinari commented Oct 18, 2022 • edited Loading

siriwatknp commented Oct 19, 2022 • edited by oliviertassinari Loading

danilo-leal commented Oct 21, 2022

cpboyd commented Oct 24, 2022 • edited by oliviertassinari Loading

siriwatknp commented Oct 24, 2022

oliviertassinari commented Nov 30, 2022 • edited Loading

siriwatknp commented Dec 1, 2022

oliviertassinari commented Dec 1, 2022 • edited Loading

paulincai commented Dec 8, 2022

mnajdova commented Dec 13, 2022

paulincai commented Dec 14, 2022

siriwatknp commented Jul 17, 2022 •

edited by oliviertassinari

Loading

oliviertassinari commented Oct 18, 2022 •

edited

Loading

siriwatknp commented Oct 19, 2022 •

edited by oliviertassinari

Loading

cpboyd commented Oct 24, 2022 •

edited by oliviertassinari

Loading

oliviertassinari commented Nov 30, 2022 •

edited

Loading

oliviertassinari commented Dec 1, 2022 •

edited

Loading