[docs] Hotfix missing styles in dark mode (mui#35179)

the-mgi · Nov 17, 2022 · 10035cb · 10035cb
1 parent 4ec2458
commit 10035cb
Showing 1 changed file with 21 additions and 2 deletions.
diff --git 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]})`,