Skip to content
Snippets Groups Projects
Unverified Commit 7f9a0d70 authored by Justin Coyne's avatar Justin Coyne Committed by GitHub
Browse files

Merge pull request #3857 from ProjectMirador/mui5-dark-mode

Fix dark mode issues with the collection dialog
parents 7c0af085 a9e082e2
No related branches found
No related tags found
2 merge requests!19Draft: Merge video support into mui5,!18Only nudge over badge content for the WindowListButton; it needs special...
......@@ -25,6 +25,9 @@ const StyledScrollIndicatedDialogContent = styled(ScrollIndicatedDialogContent)(
}));
const StyledCollectionMetadata = styled('div')(() => ({
'& .MuiPaper-root': {
background: 'transparent',
},
padding: (theme) => theme.spacing(2),
}));
......
import PropTypes from 'prop-types';
import DialogContent from '@mui/material/DialogContent';
import { styled } from '@mui/material/styles';
import { alpha, styled } from '@mui/material/styles';
const Root = styled(DialogContent, { name: 'ScrollIndicatedDialogContent', slot: 'root' })(({ theme }) => ({
/**
* From https://github.com/mui/material-ui/blob/v5.15.0/packages/mui-material/src/styles/getOverlayAlpha.ts
*/
const getOverlayAlpha = (elevation) => {
let alphaValue;
if (elevation < 1) {
alphaValue = 5.11916 * elevation ** 2;
} else {
alphaValue = 4.5 * Math.log(elevation + 1) + 2;
}
return (alphaValue / 100).toFixed(2);
};
const Root = styled(DialogContent, { name: 'ScrollIndicatedDialogContent', slot: 'root' })(({ ownerState, theme }) => {
// In dark mode, paper has a elevation-dependent background color:
// https://github.com/mui/material-ui/blob/v5.15.0/packages/mui-material/src/Paper/Paper.js#L55-L60
const bgcolor = theme.palette.mode === 'dark' ? {
backgroundImage: `linear-gradient(${alpha(
'#fff',
getOverlayAlpha(ownerState?.elevation || 24),
)}, ${alpha('#fff', getOverlayAlpha(ownerState?.elevation || 24))})`,
} : theme.palette.background.paper;
return {
/* Shadow covers */
background: `linear-gradient(${theme.palette.background.paper} 30%, rgba(255, 255, 255, 0)), `
+ `linear-gradient(rgba(255, 255, 255, 0), ${theme.palette.background.paper} 70%) 0 100%, `
background: `linear-gradient(${bgcolor} 30%, rgba(255, 255, 255, 0)), `
+ `linear-gradient(rgba(255, 255, 255, 0), ${bgcolor} 70%) 0 100%, `
// Shaddows
+ 'radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), '
+ 'radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%,',
/* Shadow covers */
background: `linear-gradient(${theme.palette.background.paper} 30%, rgba(255, 255, 255, 0)), ` // eslint-disable-line no-dupe-keys
+ `linear-gradient(rgba(255, 255, 255, 0), ${theme.palette.background.paper} 70%) 0 100%, `
background: `linear-gradient(${bgcolor} 30%, rgba(255, 255, 255, 0)), ` // eslint-disable-line no-dupe-keys
+ `linear-gradient(rgba(255, 255, 255, 0), ${bgcolor} 70%) 0 100%, `
// Shaddows
+ 'radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), '
+ 'radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;',
......@@ -20,7 +42,8 @@ const Root = styled(DialogContent, { name: 'ScrollIndicatedDialogContent', slot:
backgroundRepeat: 'no-repeat',
backgroundSize: '100% 40px, 100% 40px, 100% 14px, 100% 14px',
overflowY: 'auto',
}));
};
});
/**
* ScrollIndicatedDialogContent ~ Inject a style into the DialogContent component
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment