Default Dark Themes From prism-react-renderer
These are the dark themes that come with prism-react-renderer by default.
There are also light themes.
dracula
1function ThemeCodeBlock({ theme, code, language }) {2 return (3 <Highlight4 {...defaultProps}5 theme={theme}6 code={code.trim()}7 language={language}8 >9 {({ className, style, tokens, getLineProps, getTokenProps }) => (10 <pre className="some_class" style={style}>11 {tokens.map((line, i) => (12 <div13 key={i}14 {...getLineProps({ line, key: i })}15 className="token-line code_line"16 >17 <span className="line_number">18 {i + 1}19 </span>20 <span className="code_line_content">21 {line.map((token, key) => (22 <span key={key} {...getTokenProps({ token, key })} />23 ))}24 </span>25 </div>26 ))}27 </pre>28 )}29 </Highlight>30 )31}
duotoneDark
1function ThemeCodeBlock({ theme, code, language }) {2 return (3 <Highlight4 {...defaultProps}5 theme={theme}6 code={code.trim()}7 language={language}8 >9 {({ className, style, tokens, getLineProps, getTokenProps }) => (10 <pre className="some_class" style={style}>11 {tokens.map((line, i) => (12 <div13 key={i}14 {...getLineProps({ line, key: i })}15 className="token-line code_line"16 >17 <span className="line_number">18 {i + 1}19 </span>20 <span className="code_line_content">21 {line.map((token, key) => (22 <span key={key} {...getTokenProps({ token, key })} />23 ))}24 </span>25 </div>26 ))}27 </pre>28 )}29 </Highlight>30 )31}
nightOwl
1function ThemeCodeBlock({ theme, code, language }) {2 return (3 <Highlight4 {...defaultProps}5 theme={theme}6 code={code.trim()}7 language={language}8 >9 {({ className, style, tokens, getLineProps, getTokenProps }) => (10 <pre className="some_class" style={style}>11 {tokens.map((line, i) => (12 <div13 key={i}14 {...getLineProps({ line, key: i })}15 className="token-line code_line"16 >17 <span className="line_number">18 {i + 1}19 </span>20 <span className="code_line_content">21 {line.map((token, key) => (22 <span key={key} {...getTokenProps({ token, key })} />23 ))}24 </span>25 </div>26 ))}27 </pre>28 )}29 </Highlight>30 )31}
oceanicNext
1function ThemeCodeBlock({ theme, code, language }) {2 return (3 <Highlight4 {...defaultProps}5 theme={theme}6 code={code.trim()}7 language={language}8 >9 {({ className, style, tokens, getLineProps, getTokenProps }) => (10 <pre className="some_class" style={style}>11 {tokens.map((line, i) => (12 <div13 key={i}14 {...getLineProps({ line, key: i })}15 className="token-line code_line"16 >17 <span className="line_number">18 {i + 1}19 </span>20 <span className="code_line_content">21 {line.map((token, key) => (22 <span key={key} {...getTokenProps({ token, key })} />23 ))}24 </span>25 </div>26 ))}27 </pre>28 )}29 </Highlight>30 )31}
okaidia
1function ThemeCodeBlock({ theme, code, language }) {2 return (3 <Highlight4 {...defaultProps}5 theme={theme}6 code={code.trim()}7 language={language}8 >9 {({ className, style, tokens, getLineProps, getTokenProps }) => (10 <pre className="some_class" style={style}>11 {tokens.map((line, i) => (12 <div13 key={i}14 {...getLineProps({ line, key: i })}15 className="token-line code_line"16 >17 <span className="line_number">18 {i + 1}19 </span>20 <span className="code_line_content">21 {line.map((token, key) => (22 <span key={key} {...getTokenProps({ token, key })} />23 ))}24 </span>25 </div>26 ))}27 </pre>28 )}29 </Highlight>30 )31}
palenight
1function ThemeCodeBlock({ theme, code, language }) {2 return (3 <Highlight4 {...defaultProps}5 theme={theme}6 code={code.trim()}7 language={language}8 >9 {({ className, style, tokens, getLineProps, getTokenProps }) => (10 <pre className="some_class" style={style}>11 {tokens.map((line, i) => (12 <div13 key={i}14 {...getLineProps({ line, key: i })}15 className="token-line code_line"16 >17 <span className="line_number">18 {i + 1}19 </span>20 <span className="code_line_content">21 {line.map((token, key) => (22 <span key={key} {...getTokenProps({ token, key })} />23 ))}24 </span>25 </div>26 ))}27 </pre>28 )}29 </Highlight>30 )31}
shadesOfPurple
1function ThemeCodeBlock({ theme, code, language }) {2 return (3 <Highlight4 {...defaultProps}5 theme={theme}6 code={code.trim()}7 language={language}8 >9 {({ className, style, tokens, getLineProps, getTokenProps }) => (10 <pre className="some_class" style={style}>11 {tokens.map((line, i) => (12 <div13 key={i}14 {...getLineProps({ line, key: i })}15 className="token-line code_line"16 >17 <span className="line_number">18 {i + 1}19 </span>20 <span className="code_line_content">21 {line.map((token, key) => (22 <span key={key} {...getTokenProps({ token, key })} />23 ))}24 </span>25 </div>26 ))}27 </pre>28 )}29 </Highlight>30 )31}
synthwave84
1function ThemeCodeBlock({ theme, code, language }) {2 return (3 <Highlight4 {...defaultProps}5 theme={theme}6 code={code.trim()}7 language={language}8 >9 {({ className, style, tokens, getLineProps, getTokenProps }) => (10 <pre className="some_class" style={style}>11 {tokens.map((line, i) => (12 <div13 key={i}14 {...getLineProps({ line, key: i })}15 className="token-line code_line"16 >17 <span className="line_number">18 {i + 1}19 </span>20 <span className="code_line_content">21 {line.map((token, key) => (22 <span key={key} {...getTokenProps({ token, key })} />23 ))}24 </span>25 </div>26 ))}27 </pre>28 )}29 </Highlight>30 )31}
vsDark
1function ThemeCodeBlock({ theme, code, language }) {2 return (3 <Highlight4 {...defaultProps}5 theme={theme}6 code={code.trim()}7 language={language}8 >9 {({ className, style, tokens, getLineProps, getTokenProps }) => (10 <pre className="some_class" style={style}>11 {tokens.map((line, i) => (12 <div13 key={i}14 {...getLineProps({ line, key: i })}15 className="token-line code_line"16 >17 <span className="line_number">18 {i + 1}19 </span>20 <span className="code_line_content">21 {line.map((token, key) => (22 <span key={key} {...getTokenProps({ token, key })} />23 ))}24 </span>25 </div>26 ))}27 </pre>28 )}29 </Highlight>30 )31}