niuware/mui-rte

CodeBlock unreadable in "dark" mode

dbhausen opened this issue · 0 comments

Checklist

Description

When you are in "dark" mode the CodeBlock background stays "#eeeeee" (white) while the color inherits from <Paper>. I tried overriding styling to CodeBlock but this did not work.


const darkTheme = createMuiTheme()

Object.assign(darkTheme, {
   overrides: {
      CodeBlock: {
         root: {
            color: '#ECEFF1',
            BackgroundColor: '#212121',
         },
      },
}

I can style the color of the editor so you can read the CodeBlock but that leaves you needing a not very dark "dark" mode.

I was able to style the <pre> inside the CodeBlock this styles the `<pre>` but that looks terrible

Object.assign(darkTheme, {
   overrides: {
      MUIRichTextEditor: {
         root: {
            '& pre': {
               backgroundColor: '#212121',
               color: '#fff',
            },
         },
      },
   },
})