From c5895d75ad343cd5e92b116a9b1b261252da660a Mon Sep 17 00:00:00 2001 From: Jerel Miller <jerelmiller@gmail.com> Date: Tue, 23 Jun 2020 00:45:05 -0700 Subject: [PATCH] feat: Update CodeSnippet to use dark theme --- src/components/CodeSnippet.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/CodeSnippet.js b/src/components/CodeSnippet.js index 1686a8c85..682244dc5 100644 --- a/src/components/CodeSnippet.js +++ b/src/components/CodeSnippet.js @@ -1,13 +1,15 @@ 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 MiddleEllipsis from 'react-middle-ellipsis'; import FeatherIcon from './FeatherIcon'; import styles from './CodeSnippet.module.scss'; import useClipboard from '../hooks/useClipboard'; import useFormattedCode from '../hooks/useFormattedCode'; import Prism from 'prism-react-renderer/prism'; +import useDarkMode from 'use-dark-mode'; (typeof global !== 'undefined' ? global : window).Prism = Prism; @@ -17,13 +19,14 @@ const CodeSnippet = ({ children, copy, className, lineNumbers, fileName }) => { const language = className.replace('language-', ''); const formattedCode = useFormattedCode(children ?? ''); const [copied, copyCode] = useClipboard(); + const darkMode = useDarkMode(); return ( <div> <div className={styles.container}> <Highlight {...defaultProps} - theme={github} + theme={darkMode.value ? darkTheme : lightTheme} code={formattedCode.trim()} language={language} >