[docs-infra] Use applyDarkStyles for markdown render
#41275
Conversation
Netlify deploy previewhttps://deploy-preview-41275--material-ui.netlify.app/ Bundle size report |
| color: 'rgb(255, 255, 255)', | ||
| '& :not(pre) > code': { | ||
| // inline code block | ||
| color: theme.palette.text.primary, |
There was a problem hiding this comment.
Should it use ?
| color: theme.palette.text.primary, | |
| color: (theme.vars || theme).palette.text.primary, |
github-actions
bot
added
the
PR: out-of-date
| @@ -570,159 +567,157 @@ const Root = styled('div')( | |||
| marginBottom: theme.spacing(1), | |||
| }, | |||
| }, | |||
| }), | |||
| ({ theme }) => ({ | |||
| [`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: { | |||
There was a problem hiding this comment.
I think there's a reason I did not use theme.applyDarkStyles and go with plain string here so that it's context independent. The MarkdownElement has to use the branding theme tokens to be consistent but in some demos the branding theme is overridden by the default theme.
| color: `var(--muidocs-palette-text-primary, ${darkTheme.palette.text.primary})`, | ||
| borderColor: alpha(darkTheme.palette.primaryDark[600], 0.6), | ||
| backgroundColor: `var(--muidocs-palette-grey-900, ${darkTheme.palette.grey[900]})`, | ||
| }, | ||
| '& strong': { | ||
| color: `var(--muidocs-palette-grey-200, ${darkTheme.palette.grey[200]})`, |
There was a problem hiding this comment.
This's why I hand-picked the variables to make the component context independent.
This comment was marked as off-topic.
This comment was marked as off-topic.
Sorry, something went wrong.
There was a problem hiding this comment.
The correct changes would be using globalSelector in https://github.com/mui/material-ui/blob/master/docs/src/modules/utils/StyledEngineProvider.js so I think it's better to create a new PR.
@siriwatknp I'm not sure if that's a correct approach
Fix #41239