[blog] Fix dark mode support #35969
[blog] Fix dark mode support #35969
Conversation
oliviertassinari
added
bug 🐛
oliviertassinari
force-pushed
the
blog-fix-dark
branch
from
38ae20e to
a7c7c1c
Compare
|
oliviertassinari
force-pushed
the
blog-fix-dark
branch
from
a7c7c1c to
31c18dc
Compare
| @@ -6,7 +6,7 @@ import { useTranslate } from 'docs/src/modules/utils/i18n'; | |||
| const StyledLink = styled(MuiLink)(({ theme }) => ({ | |||
| position: 'fixed', | |||
| padding: theme.spacing(1), | |||
| background: theme.palette.background.paper, | |||
| background: (theme.vars || theme).palette.background.paper, | |||
There was a problem hiding this comment.
Off-topic. This solves a hydration mismatch otherwise when the page is in dark mode.
| const pageContextValue = React.useContext(PageContext); | ||
| // `activePage` does not exist for playground pages | ||
| // forcing light mode in playground avoids the need for a wrapping theme in playground pages | ||
| const preferredMode = pageContextValue.activePage && prefersDarkMode ? 'dark' : 'light'; |
There was a problem hiding this comment.
This is the fix, blog posts don't have active pages, like many other marketing pages.
| @@ -162,34 +158,42 @@ export function ThemeProvider(props) { | |||
| throw new Error(`Unrecognized type ${action.type}`); | |||
| } | |||
| }, | |||
| { ...themeInitialOptions, paletteMode: preferredMode }, | |||
| { ...themeInitialOptions, paletteMode: 'light' }, | |||
There was a problem hiding this comment.
Make the default value more explicit.
| ); | ||
|
|
||
| const userLanguage = useUserLanguage(); | ||
| const { dense, direction, paletteColors, paletteMode, spacing } = themeOptions; | ||
|
|
||
| useLazyCSS('/static/styles/prism-okaidia.css', '#prismjs'); | ||
|
|
||
| React.useEffect(() => { | ||
| if (typeof window !== 'undefined') { |
There was a problem hiding this comment.
this is useless, removed
| @@ -238,23 +242,10 @@ export function ThemeProvider(props) { | |||
|
|
|||
| React.useEffect(() => { | |||
| // Expose the theme as a global variable so people can play with it. | |||
| if (typeof window !== 'undefined') { | |||
There was a problem hiding this comment.
this is useless, removed
| @@ -108,14 +108,14 @@ export default function createCssVarsProvider(options) { | |||
| } | |||
|
|
|||
| const calculatedMode = (() => { | |||
| if (!mode) { | |||
There was a problem hiding this comment.
Reverse the logic to be easier to understand, it groups a related test with its outcome.
| useEnhancedEffect(() => { | ||
| // To support light and dark mode images in the docs | ||
| if (theme.palette.mode === 'dark') { | ||
| document.body.classList.remove('mode-light'); | ||
| document.body.classList.add('mode-dark'); | ||
| } else { | ||
| document.body.classList.remove('mode-dark'); | ||
| document.body.classList.add('mode-light'); | ||
| } | ||
| }, [theme.palette.mode]); |
There was a problem hiding this comment.
Moved up and grouped with the update of meta[name="theme-color"].
| // `activePage` does not exist for playground pages | ||
| // forcing light mode in playground avoids the need for a wrapping theme in playground pages |
There was a problem hiding this comment.
I think that a better solution is to move with this direction https://github.com/mui/material-ui/pull/35330/files#diff-41c21e2dc42b8c223fc2fa17580e58041afa590fe34d9fbe9a1ffbe5e17d318b
|
Nice job fixing this issue! 🎉 |
Fix #35948 (comment)
This bug was discrediting us among new users. I mean, ~1/3 of the sessions are dark mode, so, imagine we have a blog post that is meant for SEO ranking, with tone or first time visitors. Or a blog post that gets viral 🙃.