diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js index b1802eb0c492cc..59841af71cfa10 100644 --- a/docs/src/modules/components/MarkdownElement.js +++ b/docs/src/modules/components/MarkdownElement.js @@ -411,13 +411,17 @@ const Root = styled('div')( }), { ':where(.mode-dark) &': { + color: 'rgb(255, 255, 255)', '& :not(pre) > code': { // inline code block - color: '#fff', + color: `var(--muidocs-palette-text-primary, ${darkTheme.palette.text.primary})`, }, '& strong': { color: `var(--muidocs-palette-grey-200, ${darkTheme.palette.grey[200]})`, }, + '& hr': { + backgroundColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`, + }, '& h1': { color: `var(--muidocs-palette-grey-50, ${darkTheme.palette.grey[50]})`, }, @@ -438,8 +442,12 @@ const Root = styled('div')( }, '& h1, & h2, & h3, & h4': { '&:hover .anchor-link-style': { + color: `var(--muidocs-palette-text-secondary, ${darkTheme.palette.text.secondary})`, background: alpha(darkTheme.palette.primaryDark[800], 0.3), borderColor: `var(--muidocs-palette-primaryDark-500, ${darkTheme.palette.primaryDark[500]})`, + '&:hover': { + color: `var(--muidocs-palette-text-primary, ${darkTheme.palette.text.primary})`, + }, }, }, '& h1 code, & h2 code, & h3 code': { @@ -455,6 +463,17 @@ const Root = styled('div')( '& .prop-type': { color: '#ffb6ec', }, + '& .prop-default': { + borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`, + }, + }, + '& td': { + color: `var(--muidocs-palette-text-secondary, ${darkTheme.palette.text.secondary})`, + borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`, + }, + '& th': { + color: `var(--muidocs-palette-text-primary, ${darkTheme.palette.text.primary})`, + borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`, }, '& blockquote': { borderColor: `var(--muidocs-palette-warning-500, ${darkTheme.palette.warning[500]})`, @@ -512,7 +531,7 @@ const Root = styled('div')( color: `var(--muidocs-palette-primary-light, ${darkTheme.palette.primary.light})`, }, '& kbd.key': { - color: '#fff', + color: `var(--muidocs-palette-text-primary, ${darkTheme.palette.text.primary})`, backgroundColor: `var(--muidocs-palette-primaryDark-900, ${darkTheme.palette.primaryDark[900]})`, border: `1px solid var(--muidocs-palette-primaryDark-500, ${darkTheme.palette.primaryDark[500]})`, boxShadow: `inset 0 -1px 0 var(--muidocs-palette-primaryDark-700, ${darkTheme.palette.primaryDark[700]})`,