fix(v2): render correct syntax theme for current website theme (#2150)

packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js

@@ -24,7 +24,20 @@ export default ({children, className: languageClassName, metastring}) => {
       themeConfig: {prism = {}},
     },
   } = useDocusaurusContext();
+
   const [showCopied, setShowCopied] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  // The Prism theme on SSR is always the default theme but the site theme
+  // can be in a different mode. React hydration doesn't update DOM styles
+  // that come from SSR. Hence force a re-render after mounting to apply the
+  // current relevant styles. There will be a flash seen of the original
+  // styles seen using this current approach but that's probably ok. Fixing
+  // the flash will require changing the theming approach and is not worth it
+  // at this point.
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
   const target = useRef(null);
   const button = useRef(null);
   let highlightLines = [];
@@ -70,6 +83,7 @@ export default ({children, className: languageClassName, metastring}) => {
   return (
     <Highlight
       {...defaultProps}
+      key={mounted}
       theme={prismTheme}
       code={children.trim()}
       language={language}>

packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js

@@ -31,7 +31,20 @@ export default ({
       themeConfig: {prism = {}},
     },
   } = useDocusaurusContext();
+
   const [showCopied, setShowCopied] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  // The Prism theme on SSR is always the default theme but the site theme
+  // can be in a different mode. React hydration doesn't update DOM styles
+  // that come from SSR. Hence force a re-render after mounting to apply the
+  // current relevant styles. There will be a flash seen of the original
+  // styles seen using this current approach but that's probably ok. Fixing
+  // the flash will require changing the theming approach and is not worth it
+  // at this point.
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
   const target = useRef(null);
   const button = useRef(null);
   let highlightLines = [];
@@ -88,6 +101,7 @@ export default ({
   return (
     <Highlight
       {...defaultProps}
+      key={mounted}
       theme={prismTheme}
       code={children.trim()}
       language={language}>