Dark mode

gatsby-config.js

@@ -69,6 +69,7 @@ module.exports = {
         policy: [{ userAgent: '*', allow: '/' }],
       },
     },
+    'gatsby-plugin-use-dark-mode',
     'gatsby-plugin-sitemap',
     'gatsby-plugin-meta-redirect',
     {

package.json

@@ -21,6 +21,7 @@
     "gatsby-plugin-sass": "^2.3.4",
     "gatsby-plugin-sharp": "^2.6.14",
     "gatsby-plugin-sitemap": "^2.4.5",
+    "gatsby-plugin-use-dark-mode": "^1.1.2",
     "gatsby-remark-images": "^3.3.10",
     "gatsby-source-filesystem": "^2.3.11",
     "gatsby-transformer-remark": "^2.8.15",
@@ -36,7 +37,8 @@
     "react-live": "^2.2.2",
     "react-markdown": "^4.3.1",
     "react-middle-ellipsis": "^1.1.0",
-    "react-shadow": "^18.1.2"
+    "react-shadow": "^18.1.2",
+    "use-dark-mode": "^2.3.1"
   },
   "devDependencies": {
     "@newrelic/eslint-plugin-newrelic": "^0.3.0",

src/components/Button.module.scss

@@ -14,19 +14,35 @@
 }
 
 .primary {
-  color: #fff;
+  color: var(--color-white);
   border-color: var(--color-brand-800);
   background-color: var(--color-brand-800);
+
+  :global(.dark-mode) & {
+    color: var(--primary-background-color);
+    background-color: var(--color-brand-400);
+    border-color: var(--color-brand-400);
+  }
 }
 
 .normal {
   color: var(--color-neutrals-800);
   border-color: var(--color-neutrals-100);
   background-color: var(--color-neutrals-100);
+
+  :global(.dark-mode) & {
+    color: var(--color-white);
+    border-color: var(--color-dark-100);
+    background-color: var(--color-dark-100);
+  }
 }
 
 .plain {
   color: var(--color-brand-800);
   border-color: transparent;
   background-color: transparent;
+
+  :global(.dark-mode) & {
+    color: var(--color-brand-400);
+  }
 }

src/components/Callouts.module.scss

@@ -3,22 +3,35 @@
 .tip {
   padding: 1.25rem 0.3rem 1.25rem 1.25rem;
   margin: 1.55rem 3rem 1.55rem 1.25rem;
+  color: var(--primary-text-color);
+
   h4 {
-    margin-top: 0.1rem !important;
-    font-size: 0.8rem !important;
+    font-size: 0.75rem !important;
     text-transform: uppercase;
-    color: var(--color-neutrals-800) !important;
+    color: var(--heading-text-color);
   }
 }
 .caution {
   border-left: 4px solid var(--color-red-400);
   background: var(--color-red-100);
+
+  :global(.dark-mode) & {
+    background: var(--color-red-900);
+  }
 }
 .important {
   border-left: 4px solid var(--color-yellow-400);
   background: var(--color-yellow-100);
+
+  :global(.dark-mode) & {
+    background: var(--color-yellow-900);
+  }
 }
 .tip {
   border-left: 4px solid var(--color-green-400);
   background: var(--color-green-100);
+
+  :global(.dark-mode) & {
+    background: var(--color-green-900);
+  }
 }

src/components/CodeDef/CodeDef.module.scss

@@ -5,13 +5,22 @@
 
 .identifier {
   color: var(--color-neutrals-700);
+
+  :global(.dark-mode) & {
+    color: var(--color-dark-700);
+  }
 }
 
 .type {
   padding: 0.125rem;
   border-radius: 0.125rem;
   color: var(--color-green-500);
   background: var(--color-green-050);
+
+  :global(.dark-mode) & {
+    color: var(--color-green-600);
+    background: var(--color-green-100);
+  }
 }
 
 .comment {
@@ -20,12 +29,20 @@
   > p {
     display: inline;
   }
+
+  :global(.dark-mode) & {
+    color: var(--color-dark-600);
+  }
 }
 
 .keyword,
 .bracket,
 .operator {
   color: var(--color-neutrals-600);
+
+  :global(.dark-mode) & {
+    color: var(--color-dark-600);
+  }
 }
 
 .block {
@@ -34,6 +51,10 @@
 
 .string {
   color: var(--color-green-500);
+
+  :global(.dark-mode) & {
+    color: var(--color-green-200);
+  }
 }
 
 .number {

src/components/CodeSnippet.js

@@ -2,13 +2,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Button from './Button';
 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';
 import cx from 'classnames';
 
 (typeof global !== 'undefined' ? global : window).Prism = Prism;
@@ -26,6 +28,7 @@ const CodeSnippet = ({
   const language = className.replace('language-', '');
   const formattedCode = useFormattedCode(children ?? '');
   const [copied, copyCode] = useClipboard();
+  const darkMode = useDarkMode();
   const linesToHighlight =
     lineHighlight && captureLinesToHighlight(lineHighlight);
 
@@ -34,7 +37,7 @@ const CodeSnippet = ({
       <div className={styles.container}>
         <Highlight
           {...defaultProps}
-          theme={github}
+          theme={darkMode.value ? darkTheme : lightTheme}
           code={formattedCode.trim()}
           language={language}
         >

src/components/CodeSnippet.module.scss

@@ -30,14 +30,18 @@
 
 .highlight {
   background: var(--color-neutrals-300);
+
+  :global(.dark-mode) & {
+    background: var(--color-dark-100);
+  }
 }
 
 .bottomBar {
   box-sizing: border-box;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background: var(--color-neutrals-200);
+  background: var(--tertiary-background-color);
   padding: 0 1rem;
 }
 
@@ -51,9 +55,6 @@
 
 .copyButton {
   font-size: 0.75rem;
-  color: var(--color-brand-800);
-  background: none;
-  border: none;
   outline: none;
 }
 

src/components/ConstantReference.module.scss

@@ -1,5 +1,5 @@
 .container {
-  color: var(--color-neutrals-600);
+  color: var(--secondary-text-color);
   font-size: 0.875rem;
 
   &:not(:last-child) {