Component renders the wrong theme even though props are passed correctly

[cjones26]

Hello,

I am using Gatsby in combination with prism-react-renderer (I also posted this issue on the prism-react-rendered GitHub) and I've come across an issue which is stumping me. I'm not sure if this is a Gatsby or prism-react-renderer issues...I am attempting to avoid FOUC in prism-react-renderer when implementing a dark / light mode by injecting the dark class into my HTML before rendering the page via gatsby-ssr.js, like so:

gatsby-ssr.js

exports.onRenderBody = ({ setHeadComponents, setBodyAttributes }) => {
  setBodyAttributes({
    className: 'bg-white dark:bg-midnight-express',
  });

  setHeadComponents([
    <script
      key="theme"
      dangerouslySetInnerHTML={{
        __html: `(function() {  
            function setTheme(theme) {
              window.theme = theme;

              if (theme === 'dark') {
                document.documentElement.classList.toggle('dark');
              }
            };

            let preferredTheme;

            try {
              preferredTheme = localStorage.getItem('theme');
            } catch (e) {}

            let darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
            
            setTheme(preferredTheme || (darkQuery.matches ? 'dark' : 'light'));
          })();`,
      }}
    />,
  ]);
};

While this all works fine for the page theme itself, the issues crop up with my CodeBlock rendering--as you can see in the code below, when I set the default theme I first check whether we have a window -- if we do, I check whether the document.documentElement.classList contains our dark theme--if it does, we set this as the default theme. If our window is undefined, such as during the SSR, we simply return the light theme. This code works perfectly in development mode, and even appears to work perfectly when being served as a static bundle, unfortunately the Highlight component renders the wrong theme even when receiving the correct props. Please see below:

CodeBlock.tsx

/* eslint-disable react/no-array-index-key */
import React, { useState } from 'react';
import Highlight, { defaultProps, Language } from 'prism-react-renderer';
import lightTheme from 'prism-react-renderer/themes/vsLight';
import darkTheme from 'prism-react-renderer/themes/palenight';
import Themes from 'constants/Themes';

interface CodeBlockProps {
  children: {
    props: {
      children: string;
      className: string;
    };
  };
  className: string;
}

export const getInitialTheme = (): Themes => {
  if (typeof window !== `undefined`) {
    return window.document.documentElement.classList.contains(Themes.DARK) ? Themes.DARK : Themes.LIGHT;
  }

  return Themes.LIGHT;
};

export default ({ children }: CodeBlockProps) => {
  // Pull the className
  const language: Language | string = children.props.className?.replace(/language-/, '') || '';
  const themes = {
    [Themes.DARK]: darkTheme,
    [Themes.LIGHT]: lightTheme,
  };
  const [theme] = useState<Themes>(getInitialTheme());

  console.log('theme: ', theme);
  console.log('themes[theme]: ', themes[theme]);

  return (
    <Highlight
      Prism={defaultProps.Prism}
      theme={themes[theme]}
      code={children.props.children.trim()}
      language={language as Language}
    >
      {({ className, style, tokens, getLineProps, getTokenProps }) => (
        <pre className={className} style={{ ...style }}>
          {tokens.map((line, index) => {
            const lineProps = getLineProps({ line, key: index });
            return (
              <div key={`item-${index}`} className={lineProps.className} style={lineProps.style}>
                {line.map((token, key) => {
                  const tokenProps = getTokenProps({ token, key });
                  return (
                    <span key={`line-${key}`} style={tokenProps.style} className={tokenProps.className}>
                      {tokenProps.children}
                    </span>
                  );
                })}
              </div>
            );
          })}
        </pre>
      )}
    </Highlight>
  );
};

As you can see below, the dark theme is correctly identified and rendered when running in development mode:

And even after building a production bundle and serving the dark theme is identified correctly, the correct props are passed, but the rendered HTML is incorrect--as you can see, the hex values on the theme are correct:

The props passed into the Highlight component are correct:

Yet the HTML is incorrect and defaulting to the default light theme (and vice versa if I switch the default to dark):

You can access my repository with this code here:

https://github.com/cjones26/niggling-aspirations-blog/tree/738a7736e579e51dc7eb349b1404781e0007deef

Thanks!