Code blocks are unreadable in dark mode when using missing or unknown language tag

[ahelwer]

When I write a code block without any language tag or with a language tag not recognized by chroma, the combination of background color and font color is unreadable in dark mode; here's an example from a recent post of mine:

As a workaround I can specify some random supported language and get weird highlighting, but at least the text becomes legible as the background is colored #272822.

Using the firefox eyedropper tool I can see the issue is that the code background remains #f5f5f5 regardless of light/dark mode choice, while the text is changed following light/dark mode color conventions. The probable fix for this is to change the default code background color depending on light/dark mode choice, or to not change the un-highlighted code block text depending on light/dark mode choice.

[jonocarroll]

Does anyone have some CSS that will work around this issue? This is only a problem for @media (prefers-color-scheme: dark) { which can be difficult to toggle. I have some coloured code blocks that also become faded under dark mode, but there's not enough contrast either way. Overriding the default background won't work in this case, I suspect.

[jonocarroll]

I added the following to a custom CSS I have in my site (outside of the theme). It's a workaround, but it seems to help

@media (prefers-color-scheme: dark) {
   code {
    color: #fbb;
  }
  pre code {
    color: #000;
  }
}