feat(v2): add support another Prism theme for dark mode (#1984)

* feat(v2): add support another Prism theme for dark mode

* add dynamically change Prism theme

* Prepare for review

* PR review changes

* feat(v2): useThemeContext

Co-authored-by: Yangshun Tay <tay.yang.shun@gmail.com>
This commit is contained in:
Alexey Pyltsyn 2019-12-25 17:52:34 +03:00 committed by Yangshun Tay
parent dad50823b6
commit 92c68ed742
9 changed files with 84 additions and 9 deletions

View file

@ -12,7 +12,9 @@ import defaultTheme from 'prism-react-renderer/themes/palenight';
import Clipboard from 'clipboard';
import rangeParser from 'parse-numeric-range';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useThemeContext from '@theme/hooks/useThemeContext';
import Playground from '@theme/Playground';
import styles from './styles.module.css';
const highlightLinesRangeRegex = /{([\d,-]+)}/;
@ -33,6 +35,9 @@ export default ({
const target = useRef(null);
const button = useRef(null);
let highlightLines = [];
const {theme} = useThemeContext();
const prismTheme =
theme === 'dark' ? prism.darkTheme : prism.theme || defaultTheme;
if (metastring && highlightLinesRangeRegex.test(metastring)) {
const highlightLinesRange = metastring.match(highlightLinesRangeRegex)[1];
@ -60,7 +65,7 @@ export default ({
<Playground
scope={{...React}}
code={children.trim()}
theme={prism.theme || defaultTheme}
theme={prismTheme}
{...props}
/>
);
@ -83,7 +88,7 @@ export default ({
return (
<Highlight
{...defaultProps}
theme={prism.theme || defaultTheme}
theme={prismTheme}
code={children.trim()}
language={language}>
{({className, style, tokens, getLineProps, getTokenProps}) => (