fix Prism CodeBlock appearance after the update

[Simek]

Why

After the latest Docusuaurs update it look like the theme variable overwrites the background color set in the custom Prism theme:

• https://github.com/facebook/react-native-website/blob/main/website/core/PrismTheme.js#L4

This results in display issues, especially in light mode:

How

Overwrite the CodeBlock container background color, loose the class name selectors, remove the not working dark mode style.

I have re-enabled the --deepdark tweak, but it leads to the situation where Header and CodeBlocks have the same background color, so let's avoid that.

Preview

[netlify]

✅ Deploy Preview for react-native ready!

Name	Link
🔨 Latest commit	5fe1f30
🔍 Latest deploy log	https://app.netlify.com/sites/react-native/deploys/6297c39a8d60ff0008393edd
😎 Deploy Preview	https://deploy-preview-3143--react-native.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[slorber]

I think the problem is in the custom prism theme

  plain: {
    color: '#FFFFFF',
+    backgroundColor: '#282C34',
-    background: '#282C34',
  },

Afaik all existing prism themes use backgroundColor and not background.

Where is "background" coming from? Typo, or should we support/fallback to it?

[Simek]

We were using this custom theme for a few years, and every Docusaurus release until latest update was working fine with the background set in the Prism theme. However I will investigate this a bit deeper later today.

Refs: facebook/docusaurus#7172

[slorber]

Not sure why it worked before, but using the correct prism theme key definitively works better now :D

[Simek]

• https://github.com/FormidableLabs/prism-react-renderer/blob/master/tools/themeFromVsCode/src/transformSettings.js

[slorber]

@Simek this file seems related to VS Code tooling

Also this theme has a background, but not sure it's useful in practice and there's also backgroundColor: https://github.com/FormidableLabs/prism-react-renderer/blob/5a4a1a0b7b68fa7c029bbe5e94527c53b2c6daac/tools/themeFromVsCode/src/transformSettings.js

---

I'd rather ask the maintainer: @jpdriver should we support in Docusaurus a fallback so that a Prism theme with plain.background maps to plain.backgroundColor?

To me it looks like a theme mistake and users should just use backgroundColor directly in all cases

[jpdriver]

@slorber unfortunately i'd say yes -- go with implementing a fallback for now.

we're hoping to overhaul styling for prism-react-renderer in a more significant way (adopting CSS variables) soon -- so hopefully this won't always be needed! 🙇🏻‍♂️