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}
         >