Update component doc code snippets to handle dark theme

newrelic · Jun 23, 2020 · fcf7d1b · fcf7d1b
1 parent c5895d7
commit fcf7d1b
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/src/components/InlineCodeSnippet.js b/src/components/InlineCodeSnippet.js
@@ -1,15 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Highlight, { defaultProps } from 'prism-react-renderer';
-import github from 'prism-react-renderer/themes/github';
+import lightTheme from 'prism-react-renderer/themes/github';
+import darkTheme from 'prism-react-renderer/themes/nightOwl';
 import styles from './InlineCodeSnippet.module.scss';
 import cx from 'classnames';
+import useDarkMode from 'use-dark-mode';
 
 const InlineCodeSnippet = ({ children, language }) => {
+  const darkMode = useDarkMode();
+
   return (
     <Highlight
       {...defaultProps}
-      theme={github}
+      theme={darkMode.value ? darkTheme : lightTheme}
       code={children}
       language={language}
     >

diff --git a/src/components/ReferenceExample.js b/src/components/ReferenceExample.js
@@ -1,10 +1,12 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import formatCode from '../utils/formatCode';
-import github from 'prism-react-renderer/themes/github';
+import lightTheme from 'prism-react-renderer/themes/github';
+import darkTheme from 'prism-react-renderer/themes/nightOwl';
 import { LiveEditor, LiveError, LiveProvider } from 'react-live';
 import styles from './ReferenceExample.module.scss';
 import ReferencePreview from './ReferencePreview';
+import useDarkMode from 'use-dark-mode';
 
 const platformStateContextMock = {
   timeRange: {
@@ -32,6 +34,7 @@ const ReferenceExample = ({
   } = window.__NR1_SDK__.default;
   const { live } = example.options;
   let formattedCode;
+  const darkMode = useDarkMode();
 
   try {
     formattedCode = formatCode(example.sourceCode).replace(TRAILING_SEMI, '');
@@ -56,7 +59,7 @@ const ReferenceExample = ({
               []
             )}
             code={formattedCode}
-            theme={github}
+            theme={darkMode.value ? darkTheme : lightTheme}
             disabled={!live}
           >
             {live && (