title: Is there a simple way to apply a custom theme to react-syntax-highlighter?
body: <p>I've been trying to generate a snippet of code on my website on a rendered text editor using react-syntax-highlighter. I've spent a while using this plugin and love it, however I've come across an issue I can't find an answer to. I want to change some of the colors of the generated code but cannot find any other way to do this other than using their default selection of themes. They allow you to apply styles to the background and the code but not the spans that hold the colors, is there any simple way to create and apply a custom theme, or to simply target the specific classes and change their colors?</p>
  <pre><code>import { Prism as SyntaxHighlighter } from &quot;react-syntax-highlighter&quot;;
  import { atomDark } from &quot;react-syntax-highlighter/dist/esm/styles/prism&quot;;
  
  const CodeDisplay = ({ active }) =&gt; {
  
  const templateString = `
      const NewObject = New Shop(
          console.log('shop');
      )
  `
      return (
          &lt;&gt;
              &lt;SyntaxHighlighter
                  language=&quot;jsx&quot;
                  style={atomDark}
                  wrapLongLines
                  customStyle={{
                      backgroundColor: &quot;transparent&quot;,
                      opacity: &quot;1&quot;,
                      marginTop: &quot;-2rem&quot;,
                  }}
                  codeTagProps={{
                      style: {
                          color: &quot;white&quot;,
                      },
                  }}&gt;
                  {templateString}
              &lt;/SyntaxHighlighter&gt;
          &lt;/&gt;
      );
  };
  </code></pre>
  <p><a href="https://i.stack.imgur.com/Sjoj2.png" rel="noreferrer">Output Screenshot</a></p>