fixed code theming issue

Author: bennobuilder

src/components/other/LiveCoder/components/LiveCoderReact/index.tsx

@@ -1,17 +1,30 @@
 import * as React from 'react';
 import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live';
-import clsx from 'clsx';
 import styles from './styles.module.css';
 import { CodeSectionPropsInterface } from '../../index';
 import ReactLiveScope from '@theme/ReactLiveScope';
+import { useEffect, useState } from 'react';
 
 interface Props extends CodeSectionPropsInterface {}
 
 const LiveCoderReact: React.FC<Props> = (props) => {
   const { code, theme, transformCode } = props;
 
+  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);
+  }, []);
+
   return (
     <LiveProvider
+      key={String(mounted)}
       code={code.replace(/\n$/, '')}
       transformCode={transformCode || ((code) => `${code};`)}
       theme={theme}

src/components/other/LiveCoder/index.tsx

@@ -4,12 +4,10 @@ import LiveCoderReact from './components/LiveCoderReact';
 import { PrismTheme } from 'prism-react-renderer';
 import { useState } from 'react';
 import LiveCodeNotFound from './components/LiveCodeNotFound';
-import FrameworkButton, {
-  FrameworkButtonProps,
-} from './components/FrameworkButton';
 import { FaReact, FaVuejs } from 'react-icons/all';
-import usePrismTheme from '../../../theme/hooks/usePrismTheme';
+import usePrismTheme from '@theme/hooks/usePrismTheme';
 import PlainButton from '../../buttons/PlainButton';
+import FrameworkButton from './components/FrameworkButton';
 
 type Props = {
   reactCode: string;