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.

Sign up for GitHub

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

[blog] Fix dark mode support #35969

Merged
merged 2 commits into from
Feb 4, 2023
Merged

[blog] Fix dark mode support #35969

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
31c18dc
[blog] Fix dark mode support
oliviertassinari Jan 28, 2023
3ab92a9
revert unrelated changes
oliviertassinari Feb 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/src/modules/components/SkipLink.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Copy link
Member Author

@oliviertassinari oliviertassinari Jan 28, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Off-topic. This solves a hydration mismatch otherwise when the page is in dark mode.

Screenshot 2023-01-28 at 01 59 16

http://0.0.0.0:3000/blog/v6-beta-pickers/

transition: theme.transitions.create('top', {
easing: theme.transitions.easing.easeIn,
duration: theme.transitions.duration.leavingScreen,
Expand Down
60 changes: 25 additions & 35 deletions docs/src/modules/components/ThemeContext.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import {
getThemedComponents,
getMetaThemeColor,
} from 'docs/src/modules/brandingTheme';
import PageContext from './PageContext';

const languageMap = {
en: enUS,
Expand Down Expand Up @@ -109,11 +108,8 @@ if (process.env.NODE_ENV !== 'production') {

export function ThemeProvider(props) {
const { children } = props;
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
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
Comment on lines -114 to -115
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think that a better solution is to move with this direction https://github.com/mui/material-ui/pull/35330/files#diff-41c21e2dc42b8c223fc2fa17580e58041afa590fe34d9fbe9a1ffbe5e17d318b

const preferredMode = pageContextValue.activePage && prefersDarkMode ? 'dark' : 'light';
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the fix, blog posts don't have active pages, like many other marketing pages.

const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)', { noSsr: true });
const preferredMode = prefersDarkMode ? 'dark' : 'light';

const [themeOptions, dispatch] = React.useReducer(
(state, action) => {
Expand Down Expand Up @@ -162,34 +158,41 @@ export function ThemeProvider(props) {
throw new Error(`Unrecognized type ${action.type}`);
}
},
{ ...themeInitialOptions, paletteMode: preferredMode },
{ ...themeInitialOptions, paletteMode: 'light' },
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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') {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is useless, removed

const nextPaletteColors = JSON.parse(getCookie('paletteColors') || 'null');
let nextPaletteMode = localStorage.getItem('mui-mode') || preferredMode; // syncing with homepage, can be removed once all pages are migrated to CSS variables
if (nextPaletteMode === 'system') {
nextPaletteMode = preferredMode;
}

dispatch({
type: 'CHANGE',
payload: { paletteColors: nextPaletteColors, paletteMode: nextPaletteMode },
});
useEnhancedEffect(() => {
const nextPaletteColors = JSON.parse(getCookie('paletteColors') || 'null');
let nextPaletteMode = localStorage.getItem('mui-mode') || preferredMode; // syncing with homepage, can be removed once all pages are migrated to CSS variables
if (nextPaletteMode === 'system') {
nextPaletteMode = preferredMode;
}

dispatch({
type: 'CHANGE',
payload: { paletteColors: nextPaletteColors, paletteMode: nextPaletteMode },
});
}, [preferredMode]);

useEnhancedEffect(() => {
document.body.dir = direction;
}, [direction]);

React.useEffect(() => {
useEnhancedEffect(() => {
// To support light and dark mode images in the docs
if (paletteMode === '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');
}

const metas = document.querySelectorAll('meta[name="theme-color"]');
metas.forEach((meta) => {
meta.setAttribute('content', getMetaThemeColor(paletteMode));
Expand Down Expand Up @@ -238,23 +241,10 @@ export function ThemeProvider(props) {

React.useEffect(() => {
// Expose the theme as a global variable so people can play with it.
if (typeof window !== 'undefined') {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is useless, removed

window.theme = theme;
window.createTheme = createTheme;
}
window.theme = theme;
window.createTheme = createTheme;
}, [theme]);

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]);
Comment on lines -247 to -256
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved up and grouped with the update of meta[name="theme-color"].


return (
<MuiThemeProvider theme={theme}>
<DispatchContext.Provider value={dispatch}>{children}</DispatchContext.Provider>
Expand Down
14 changes: 7 additions & 7 deletions packages/mui-system/src/cssVars/createCssVarsProvider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,14 +108,14 @@ export default function createCssVarsProvider(options) {
}

const calculatedMode = (() => {
if (!mode) {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reverse the logic to be easier to understand, it groups a related test with its outcome.

// This scope occurs on the server
if (defaultMode === 'system') {
return designSystemMode;
}
return defaultMode;
if (mode) {
return mode;
}
// This scope occurs on the server
if (defaultMode === 'system') {
return designSystemMode;
}
return mode;
return defaultMode;
})();
const calculatedColorScheme = (() => {
if (!colorScheme) {
Expand Down