diff --git a/gatsby-config.js b/gatsby-config.js
index eae0cd33..79597b63 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -43,7 +43,12 @@ module.exports = {
           {
             resolve: `gatsby-remark-vscode`,
             options: {
-              theme: `Tomorrow`,
+              theme: {
+                default: `Tomorrow`,
+                parentSelector: {
+                  "body.dark": "Tomorrow Night",
+                },
+              },
               extensions: [`elixir-ls`, `viml`, `vscode-themes/tomorrow`],
             },
           },
@@ -150,5 +155,15 @@ module.exports = {
         ],
       },
     },
+    {
+      resolve: "gatsby-plugin-use-dark-mode",
+      options: {
+        classNameDark: "dark",
+        classNameLight: "light",
+        storageKey: "darkMode",
+        element: "html",
+        minify: true,
+      },
+    },
   ],
 };
diff --git a/package.json b/package.json
index 9f17d241..6b4261df 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
     "gatsby-plugin-react-helmet": "^3.1.18",
     "gatsby-plugin-sharp": "^2.14.4",
     "gatsby-plugin-typescript": "^2.4.19",
+    "gatsby-plugin-use-dark-mode": "^1.3.0",
     "gatsby-remark-autolink-headers": "^2.2.3",
     "gatsby-remark-copy-linked-files": "^2.1.33",
     "gatsby-remark-external-links": "0.0.4",
@@ -53,7 +54,9 @@
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-helmet": "^5.2.1",
+    "react-toggle-dark-mode": "^1.0.4",
     "typescript": "^4.3.5",
+    "use-dark-mode": "^2.3.1",
     "viml": "XadillaX/vscode-language-viml",
     "vscode-themes": "Microsoft/vscode-themes"
   },
diff --git a/src/components/DarkModeToggle.tsx b/src/components/DarkModeToggle.tsx
new file mode 100644
index 00000000..f4f2f9f7
--- /dev/null
+++ b/src/components/DarkModeToggle.tsx
@@ -0,0 +1,23 @@
+import * as React from "react";
+
+import useDarkMode from "use-dark-mode";
+import { DarkModeSwitch } from "react-toggle-dark-mode";
+
+function DarkModeToggle() {
+  const { value: isDarkMode, toggle: toggle } = useDarkMode(false, {
+    classNameDark: "dark",
+    classNameLight: "light",
+  });
+
+  return (
+    <DarkModeSwitch
+      checked={isDarkMode}
+      onChange={toggle}
+      size={18}
+      moonColor={"#A78BFA"} // purple-400
+      sunColor={"white"}
+    />
+  );
+}
+
+export default DarkModeToggle;
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 31f9bc8d..4d69bbd7 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -3,31 +3,36 @@ import * as React from "react";
 
 function Footer() {
   return (
-    <div className="flex justify-between py-4 px-1 bg-green-800 text-white">
+    <div className="flex justify-between py-4 px-1 bg-green-800 text-white dark:bg-gray-800 dark:text-purple-400">
       <div className="flex flex-col pl-5 my-auto">
-        <Link to="/" className="hover:text-black">
+        <Link to="/" className="hover:text-black dark:hover:text-white">
           Home
         </Link>
         <div className="group">
           <a
             href="https://github.com/tmr08c/"
             target="blank"
-            className="group-hover:text-black"
+            className="group-hover:text-black dark:group-hover:text-white"
           >
             {/* GitHub Logo SVG generated from Jekyll version of blog */}
             <svg viewBox="0 0 16 16" className="w-5 h-5 inline fill-current">
               <path d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z" />
             </svg>
-            <span className="text-sm ml-1 group-hover:text-black">@tmr08c</span>
+            <span className="text-sm ml-1 group-hover:text-black dark:group-hover:text-white">
+              @tmr08c
+            </span>
           </a>
         </div>
       </div>
       <div className="flex flex-col items-end pr-5 my-auto">
-        <Link to="/talks" className="hover:text-black">
+        <Link to="/talks" className="hover:text-black dark:hover:text-white">
           Talks
         </Link>
         <div className="flex items-center">
-          <Link to="/rss.xml" className="mr-3 hover:text-black">
+          <Link
+            to="/rss.xml"
+            className="mr-3 hover:text-black dark:hover:text-white"
+          >
             {/* Logo thanks to https://www.svgrepo.com/svg/95552/rss-sign  */}
             <svg viewBox="0 0 461.432 461.432" className="h-3 w-3 fill-current">
               <defs />
@@ -35,7 +40,7 @@ function Footer() {
               <path d="M0 73.411c0 8.51 6.713 15.482 15.216 15.819 194.21 7.683 350.315 161.798 358.098 355.879.34 8.491 7.32 15.208 15.818 15.208h56.457c4.297 0 8.408-1.744 11.393-4.834a15.857 15.857 0 004.441-11.552C453.181 199.412 261.024 9.27 16.38 1.121A15.844 15.844 0 004.838 5.568 15.842 15.842 0 000 16.954v56.457z" />
             </svg>
           </Link>
-          <Link to="/blog" className="hover:text-black">
+          <Link to="/blog" className="hover:text-black dark:hover:text-white">
             Blog
           </Link>
         </div>
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index e8cc49a2..71627662 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,6 +1,8 @@
 import { Link, StaticQuery, graphql } from "gatsby";
 import * as React from "react";
 
+import DarkModeToggle from "./DarkModeToggle";
+
 function Header(): JSX.Element {
   return (
     <StaticQuery
@@ -14,7 +16,7 @@ function Header(): JSX.Element {
         }
       `}
       render={(data) => (
-        <nav className="flex items-center justify-between flex-wrap bg-green-800 px-6 py-12 mb-5 text-white">
+        <nav className="flex items-center justify-between flex-wrap bg-green-800 px-6 py-12 mb-5 text-white dark:bg-gray-800 dark:border-b-4 dark:border-double dark:border-purple-400 dark:text-purple-400">
           <div className="flex flex-no-shrink">
             <Link
               to="/"
@@ -23,16 +25,22 @@ function Header(): JSX.Element {
               {data.site.siteMetadata.title}
             </Link>
           </div>
-          <div className="justify-end flex mr-4">
-            <div className="text-xl">
-              <Link to="/talks" className="mr-6 hover:text-black">
-                Talks
-              </Link>
+          <div className="justify-end flex mr-4 text-xl items-center">
+            <Link
+              to="/talks"
+              className="mr-6 hover:text-black dark:hover:text-white"
+            >
+              Talks
+            </Link>
+
+            <Link
+              to="/blog"
+              className="mr-6 hover:text-black dark:hover:text-white"
+            >
+              Blog
+            </Link>
 
-              <Link to="/blog" className="hover:text-black">
-                Blog
-              </Link>
-            </div>
+            <DarkModeToggle />
           </div>
         </nav>
       )}
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 82ffabc0..e80cc6c3 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -4,13 +4,13 @@ import Footer from "./Footer";
 import Header from "./Header";
 
 const Layout: React.SFC = ({ children }) => (
-  <>
+  <div className="dark:bg-gray-800 dark:text-white">
     <Header />
     <main className="min-h-screen mx-auto px-4 py-8 max-w-2xl sm:px-6 sm:py-12 lg:max-w-3xl lg:py-16 2xl:max-w-4xl xl:px-0">
       {children}
     </main>
     <Footer />
-  </>
+  </div>
 );
 
 export default Layout;
diff --git a/src/components/talks/Talk.tsx b/src/components/talks/Talk.tsx
index 08f7a41d..3ea5dc73 100644
--- a/src/components/talks/Talk.tsx
+++ b/src/components/talks/Talk.tsx
@@ -26,7 +26,7 @@ const Talk: React.SFC<TalkProps> = ({ talk }) => {
         </span>
       </h3>
       <div
-        className="text-gray-800"
+        className="text-gray-800 dark:text-gray-300"
         dangerouslySetInnerHTML={{ __html: talk.description }}
       />
     </div>
diff --git a/src/css/tailwind_setup.css b/src/css/tailwind_setup.css
index 8c29357a..c9025b45 100644
--- a/src/css/tailwind_setup.css
+++ b/src/css/tailwind_setup.css
@@ -9,24 +9,24 @@
  *
  * @import "tailwindcss/base";
  */
- @tailwind base;
+@tailwind base;
 
- /**
+/**
   * This injects any component classes registered by plugins.
   *
   * If using `postcss-import`, use this import instead:
   *
   * @import "tailwindcss/components";
   */
- @tailwind components;
+@tailwind components;
 
- /**
+/**
   * Here you would add any of your custom component classes; stuff that you'd
   * want loaded *before* the utilities so that the utilities could still
   * override them.
   *
   * Example:
-  *
+
   * .btn { ... }
   * .form-input { ... }
   *
@@ -36,23 +36,23 @@
   * @import "components/forms";
   */
 
-  /* Custom styling for KBD element */
-  kbd {
-    @apply text-gray-800;
-    @apply text-sm;
+/* Custom styling for KBD element */
+kbd {
+  @apply text-gray-800;
+  @apply text-sm;
 
-    @apply bg-gray-100;
+  @apply bg-gray-100;
 
-    @apply border-gray-400;
-    @apply border;
-    @apply rounded-sm;
+  @apply border-gray-400;
+  @apply border;
+  @apply rounded-sm;
 
-    @apply shadow;
+  @apply shadow;
 
-    @apply px-1;
-  }
+  @apply px-1;
+}
 
- /**
+/**
   * This injects all of Tailwind's utility classes, generated based on your
   * config file.
   *
@@ -60,9 +60,9 @@
   *
   * @import "tailwindcss/utilities";
   */
- @tailwind utilities;
+@tailwind utilities;
 
- /**
+/**
   * Here you would add any custom utilities you need that don't come out of the
   * box with Tailwind.
   *
diff --git a/src/pages/blog.tsx b/src/pages/blog.tsx
index c29f853e..f371212c 100644
--- a/src/pages/blog.tsx
+++ b/src/pages/blog.tsx
@@ -46,11 +46,11 @@ class IndexPage extends React.Component<IndexPageProps, {}> {
                 <h3 className="text-3xl hover:text-purple-400 duration-300 transition-colors">
                   <Link to={node.fields.slug}>{title}</Link>
                 </h3>
-                <small className="italic text-gray-600">
+                <small className="italic text-gray-600 dark:text-gray-400">
                   {node.frontmatter.date}
                 </small>
                 <p
-                  className="text-gray-700 mt-1"
+                  className="text-gray-700 mt-1 dark:text-gray-300"
                   dangerouslySetInnerHTML={{ __html: node.excerpt }}
                 />
               </div>
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 747d262f..ee766a6a 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -10,7 +10,7 @@ class IndexPage extends React.Component<{}, {}> {
   render() {
     return (
       <>
-        <div className="object-cover min-h-screen bg-green-800">
+        <div className="object-cover min-h-screen bg-green-800 dark:bg-gray-800">
           <SEO
             title="Home"
             keywords={[
@@ -43,7 +43,7 @@ class IndexPage extends React.Component<{}, {}> {
             <Selfie />
 
             <h2 className="text-xl lg:text-2xl font-thin p-6">
-              I am a Software Developer &amp; Engineering Manager
+              Software Developer &amp; Engineering Manager
             </h2>
           </div>
         </div>
diff --git a/src/pages/talks.tsx b/src/pages/talks.tsx
index c95420ba..a6707b41 100644
--- a/src/pages/talks.tsx
+++ b/src/pages/talks.tsx
@@ -31,7 +31,7 @@ class TalksPage extends React.Component<TalkPageProps, {}> {
       <Layout>
         <SEO title="Talks" keywords={["programming", "conference talks"]} />
         <h1 className="text-center text-5xl font-bold mb-5">Talks</h1>
-        <div className="text-md text-gray-600 italic mb-8">
+        <div className="text-md text-gray-600 italic mb-8 dark:text-gray-400">
           Below are some talks that I have given over time. When possible, I
           have provided links to slides and/or code.
         </div>
diff --git a/src/templates/blog-post.tsx b/src/templates/blog-post.tsx
index 0c1adc10..47e2ff38 100644
--- a/src/templates/blog-post.tsx
+++ b/src/templates/blog-post.tsx
@@ -47,7 +47,7 @@ const EditOnGitHubLink = ({
   const linkToIssues = `${repoLink}/issues`;
 
   return (
-    <div className="text-center font-light text-sm md:text-sm text-gray-600 italic mb-10 xl:mb-8">
+    <div className="text-center font-light text-sm md:text-sm text-gray-600 italic mb-10 xl:mb-8 dark:text-gray-300">
       Notice something wrong? Please consider{" "}
       <a
         href={linkToPostInRepo}
@@ -79,23 +79,27 @@ const OtherPostsNav = ({
   next: PostInfo;
 }) => {
   return (
-    <div className="text-gray-600 grid grid-flow-col grid-cols-3 justify-items-stretch align-middle items-center text-xs sm:text-sm lg:text-base">
+    <div className="text-gray-600 grid grid-flow-col grid-cols-3 justify-items-stretch align-middle items-center text-xs sm:text-sm lg:text-base dark:text-gray-300">
       {previous ? (
-        <Link to={previous.fields.slug} rel="prev" className="flex flex-row">
+        <Link
+          to={previous.fields.slug}
+          rel="prev"
+          className="flex flex-row hover:text-purple-400"
+        >
           <span className="self-center flex-none mr-2">←</span>
           <span>{previous.frontmatter.title}</span>
         </Link>
       ) : (
         <span></span>
       )}
-      <Link to="/blog" className="text-center">
+      <Link to="/blog" className="text-center hover:text-purple-400">
         - All Posts -
       </Link>
       {next ? (
         <Link
           to={next.fields.slug}
           rel="next"
-          className="flex flex-row justify-right"
+          className="flex flex-row justify-right hover:text-purple-400"
         >
           <span className="text-right">{next.frontmatter.title}</span>
           <span className="self-center flex-none ml-2">→</span>
@@ -115,13 +119,13 @@ class BlogPostTemplate extends React.Component<BlogPostTemplateProps, {}> {
 
     return (
       <Layout>
-        <article className="prose prose-sm sm:prose lg:prose-lg xl:prose-xl">
+        <article className="prose prose-sm sm:prose lg:prose-lg xl:prose-xl dark:prose-light">
           <SEO title={post.frontmatter.title} description={post.excerpt} />
           <h1>{post.frontmatter.title}</h1>
           <div dangerouslySetInnerHTML={{ __html: post.html }} />
         </article>
 
-        <div className="flex justify-end text-xs md:text-sm text-gray-600 font-light italic mb-2">
+        <div className="flex justify-end text-xs md:text-sm text-gray-600 font-light italic mb-2 dark:text-gray-400">
           <time dateTime={post.frontmatter.date}>{post.frontmatter.date}</time>
         </div>
 
diff --git a/tailwind.config.js b/tailwind.config.js
index d77c5ca9..8c69a35f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,9 @@
+const colors = require("tailwindcss/colors");
+
 module.exports = {
+  darkMode: "class",
   theme: {
-    // Some useful comment
+    colors: colors,
     extend: {
       animation: {
         wiggle: "wiggle 3s ease-in-out infinite",
@@ -28,13 +31,90 @@ module.exports = {
             },
           },
         },
+        light: {
+          css: [
+            {
+              color: theme("colors.gray.200"),
+              '[class~="lead"]': {
+                color: theme("colors.gray.300"),
+              },
+              a: {
+                color: theme("colors.white"),
+                "&:hover": {
+                  color: theme("colors.purple.400"),
+                },
+              },
+              strong: {
+                color: theme("colors.white"),
+              },
+              "ol > li::before": {
+                color: theme("colors.gray.400"),
+              },
+              "ul > li::before": {
+                backgroundColor: theme("colors.gray.600"),
+              },
+              hr: {
+                borderColor: theme("colors.gray.200"),
+              },
+              blockquote: {
+                color: theme("colors.gray.200"),
+                borderLeftColor: theme("colors.gray.600"),
+              },
+              h1: {
+                color: theme("colors.white"),
+              },
+              h2: {
+                color: theme("colors.white"),
+              },
+              h3: {
+                color: theme("colors.white"),
+              },
+              h4: {
+                color: theme("colors.white"),
+              },
+              "figure figcaption": {
+                color: theme("colors.gray.400"),
+              },
+              code: {
+                color: theme("colors.white"),
+              },
+              "a code": {
+                color: theme("colors.white"),
+              },
+              pre: false,
+              thead: {
+                color: theme("colors.white"),
+                borderBottomColor: theme("colors.gray.400"),
+              },
+              "tbody tr": {
+                borderBottomColor: theme("colors.gray.600"),
+              },
+            },
+          ],
+        },
       }),
     },
   },
   variants: {
-    textColor: ["responsive", "hover", "focus", "active", "group-hover"],
-    borderStyle: ["responsive", "hover", "focus", "active", "group-hover"],
+    textColor: [
+      "dark",
+      "responsive",
+      "hover",
+      "focus",
+      "active",
+      "group-hover",
+    ],
+    borderWidth: ["dark"],
+    borderStyle: [
+      "dark",
+      "responsive",
+      "hover",
+      "focus",
+      "active",
+      "group-hover",
+    ],
     animation: ["responsive", "hover", "motion-safe", "motion-reduce"],
+    typography: ["dark"],
   },
   plugins: [require("@tailwindcss/typography")],
   // Using the built-in support for purging CSS
diff --git a/yarn.lock b/yarn.lock
index f8a90220..f0e7a418 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1802,6 +1802,91 @@
     prop-types "^15.6.1"
     react-lifecycles-compat "^3.0.4"
 
+"@react-spring/animated@~9.2.0":
+  version "9.2.4"
+  resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.2.4.tgz#062ecc0fdfef89f2541a42d8500428b70035f879"
+  integrity sha512-AfV6ZM8pCCAT29GY5C8/1bOPjZrv/7kD0vedjiE/tEYvNDwg9GlscrvsTViWR2XykJoYrDfdkYArrldWpsCJ5g==
+  dependencies:
+    "@react-spring/shared" "~9.2.0"
+    "@react-spring/types" "~9.2.0"
+
+"@react-spring/core@~9.2.0":
+  version "9.2.4"
+  resolved "https://registry.yarnpkg.com/@react-spring/core/-/core-9.2.4.tgz#275a4a065e3a315a4f5fb28c9a6f62ce718c25d6"
+  integrity sha512-R+PwyfsjiuYCWqaTTfCpYpRmsP0h87RNm7uxC1Uxy7QAHUfHEm2sAHn+AdHPwq/MbVwDssVT8C5yf2WGcqiXGg==
+  dependencies:
+    "@react-spring/animated" "~9.2.0"
+    "@react-spring/shared" "~9.2.0"
+    "@react-spring/types" "~9.2.0"
+
+"@react-spring/konva@~9.2.0":
+  version "9.2.4"
+  resolved "https://registry.yarnpkg.com/@react-spring/konva/-/konva-9.2.4.tgz#e467b24b3b110ba496526c9001439ce561641e0d"
+  integrity sha512-19anDOIkfjcydDTfGgVIuZ3lruZxKubYGs9oHCswaP8SRLj7c1kkopJHUr/S4LXGxiIdqdF0XucWm0iTEPEq4w==
+  dependencies:
+    "@react-spring/animated" "~9.2.0"
+    "@react-spring/core" "~9.2.0"
+    "@react-spring/shared" "~9.2.0"
+    "@react-spring/types" "~9.2.0"
+
+"@react-spring/native@~9.2.0":
+  version "9.2.4"
+  resolved "https://registry.yarnpkg.com/@react-spring/native/-/native-9.2.4.tgz#0fd335a44c05023f5428df444d8f1aa3da7abfc9"
+  integrity sha512-xKJWKh5qOhSclpL3iuGwJRLoZzTNvlBEnIrMs8yh8xvX6z9Lmnu4uGu5DpfrnM1GzBvRoktoCoLEx/VcEYFSng==
+  dependencies:
+    "@react-spring/animated" "~9.2.0"
+    "@react-spring/core" "~9.2.0"
+    "@react-spring/shared" "~9.2.0"
+    "@react-spring/types" "~9.2.0"
+
+"@react-spring/rafz@~9.2.0":
+  version "9.2.4"
+  resolved "https://registry.yarnpkg.com/@react-spring/rafz/-/rafz-9.2.4.tgz#44793e9adc14dd0dcd1573d094368af11a89d73a"
+  integrity sha512-SOKf9eue+vAX+DGo7kWYNl9i9J3gPUlQjifIcV9Bzw9h3i30wPOOP0TjS7iMG/kLp2cdHQYDNFte6nt23VAZkQ==
+
+"@react-spring/shared@~9.2.0":
+  version "9.2.4"
+  resolved "https://registry.yarnpkg.com/@react-spring/shared/-/shared-9.2.4.tgz#f9cc66ac5308a77293330a18518e34121f4008c1"
+  integrity sha512-ZEr4l2BxmyFRUvRA2VCkPfCJii4E7cGkwbjmTBx1EmcGrOnde/V2eF5dxqCTY3k35QuCegkrWe0coRJVkh8q2Q==
+  dependencies:
+    "@react-spring/rafz" "~9.2.0"
+    "@react-spring/types" "~9.2.0"
+
+"@react-spring/three@~9.2.0":
+  version "9.2.4"
+  resolved "https://registry.yarnpkg.com/@react-spring/three/-/three-9.2.4.tgz#849c97658a6e1410b6f823ad21e2ee33feada820"
+  integrity sha512-ljFig7XW099VWwRPKPUf+4yYLivp/sSWXN3oO5SJOF/9BSoV1quS/9chZ5Myl5J14od3CsHf89Tv4FdlX5kHlA==
+  dependencies:
+    "@react-spring/animated" "~9.2.0"
+    "@react-spring/core" "~9.2.0"
+    "@react-spring/shared" "~9.2.0"
+    "@react-spring/types" "~9.2.0"
+
+"@react-spring/types@~9.2.0":
+  version "9.2.4"
+  resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.2.4.tgz#2365ce9d761f548a9adcb2cd68714bf26765a5de"
+  integrity sha512-zHUXrWO8nweUN/ISjrjqU7GgXXvoEbFca1CgiE0TY0H/dqJb3l+Rhx8ecPVNYimzFg3ZZ1/T0egpLop8SOv4aA==
+
+"@react-spring/web@~9.2.0":
+  version "9.2.4"
+  resolved "https://registry.yarnpkg.com/@react-spring/web/-/web-9.2.4.tgz#c6d5464a954bfd0d7bc90117050f796a95ebfa08"
+  integrity sha512-vtPvOalLFvuju/MDBtoSnCyt0xXSL6Amyv82fljOuWPl1yGd4M1WteijnYL9Zlriljl0a3oXcPunAVYTD9dbDQ==
+  dependencies:
+    "@react-spring/animated" "~9.2.0"
+    "@react-spring/core" "~9.2.0"
+    "@react-spring/shared" "~9.2.0"
+    "@react-spring/types" "~9.2.0"
+
+"@react-spring/zdog@~9.2.0":
+  version "9.2.4"
+  resolved "https://registry.yarnpkg.com/@react-spring/zdog/-/zdog-9.2.4.tgz#db1d1924fe9920e917d889c4d3bb138bd0885cf1"
+  integrity sha512-rv7ptedS37SHr6yuCbRkUErAzAhebdgt8f4KUtZWzseC+7qLNkaZWf+uujgsb881qAuX9b9yz8rre9UKeYepgw==
+  dependencies:
+    "@react-spring/animated" "~9.2.0"
+    "@react-spring/core" "~9.2.0"
+    "@react-spring/shared" "~9.2.0"
+    "@react-spring/types" "~9.2.0"
+
 "@samverschueren/stream-to-observable@^0.3.0":
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.1.tgz#a21117b19ee9be70c379ec1877537ef2e1c63301"
@@ -2269,6 +2354,11 @@
     semver "^7.3.2"
     tsutils "^3.17.1"
 
+"@use-it/event-listener@^0.1.2":
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/@use-it/event-listener/-/event-listener-0.1.6.tgz#5776274fec72f3f25af9ead1898e7f45bc435812"
+  integrity sha512-e6V7vbU8xpuqy4GZkTLExHffOFgxmGHo3kNWnlhzM/zcX2v+idbD/HaJ9sKdQMgTh+L7MIhdRDXGX3SdAViZzA==
+
 "@webassemblyjs/ast@1.9.0":
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964"
@@ -7218,6 +7308,14 @@ gatsby-plugin-typescript@^2.12.1, gatsby-plugin-typescript@^2.4.19:
     "@babel/runtime" "^7.12.5"
     babel-plugin-remove-graphql-queries "^2.16.1"
 
+gatsby-plugin-use-dark-mode@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-use-dark-mode/-/gatsby-plugin-use-dark-mode-1.3.0.tgz#995ab84e3b867fe94797b7b1c081e90c7c12c8dc"
+  integrity sha512-AdUlgzZV9kzTdff2LUEfeyWhQhD45qXFVat6jcAW9EeZXS2266GUiz1ihbX8rzJ32vDRJocJHCsxp5ee9w3M5A==
+  dependencies:
+    prop-types "^15.7.2"
+    terser "^4.0.0"
+
 gatsby-plugin-utils@^0.9.0:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-utils/-/gatsby-plugin-utils-0.9.0.tgz#64b35a0faaabad5b5c99ee8951a9c08cd64be289"
@@ -13036,6 +13134,25 @@ react-side-effect@^1.1.0:
   dependencies:
     shallowequal "^1.0.1"
 
+react-spring@^9.0.0-rc.3:
+  version "9.2.4"
+  resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-9.2.4.tgz#9d89b0321664d594f957dca9459b13d94b3dfa39"
+  integrity sha512-bMjbyTW0ZGd+/h9cjtohLqCwOGqX2OuaTvalOVfLCGmhzEg/u3GgopI3LAm4UD2Br3MNdVdGgNVoESg4MGqKFQ==
+  dependencies:
+    "@react-spring/core" "~9.2.0"
+    "@react-spring/konva" "~9.2.0"
+    "@react-spring/native" "~9.2.0"
+    "@react-spring/three" "~9.2.0"
+    "@react-spring/web" "~9.2.0"
+    "@react-spring/zdog" "~9.2.0"
+
+react-toggle-dark-mode@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/react-toggle-dark-mode/-/react-toggle-dark-mode-1.0.4.tgz#196defb8ed5fa7623241048d46104fa24d98e214"
+  integrity sha512-MREeRur1XGzwyDZZAvPFg01wL9ljR1Dugubc3s/i2bMlLIKaWPfQgx5JbomZfLAxa6OXYDbozJa0e+v39GawmA==
+  dependencies:
+    react-spring "^9.0.0-rc.3"
+
 react@^16.12.0:
   version "16.14.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
@@ -14991,7 +15108,7 @@ terser-webpack-plugin@^2.3.8:
     terser "^4.6.12"
     webpack-sources "^1.4.3"
 
-terser@^4.1.2, terser@^4.6.12:
+terser@^4.0.0, terser@^4.1.2, terser@^4.6.12:
   version "4.8.0"
   resolved "https://registry.yarnpkg.com/terser/-/terser-4.8.0.tgz#63056343d7c70bb29f3af665865a46fe03a0df17"
   integrity sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==
@@ -15826,6 +15943,21 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-dark-mode@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/use-dark-mode/-/use-dark-mode-2.3.1.tgz#d506349c7b7e09e9977cb8a6ab4470896aa3779a"
+  integrity sha512-hmcdJR96tTustRQdaQwe6jMrZHnmPqXBxgy4jaQ4gsfhwajsCpjECuq9prgDe9XxMx/f9r96o2/md6O4Lwhwjg==
+  dependencies:
+    "@use-it/event-listener" "^0.1.2"
+    use-persisted-state "^0.3.0"
+
+use-persisted-state@^0.3.0:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/use-persisted-state/-/use-persisted-state-0.3.3.tgz#5e0f2236967cec7c34de33abc07ae6818e7c7451"
+  integrity sha512-pCNlvYC8+XjRxwnIut4teGC9f2p9aD88R8OGseQGZa2dvqG/h1vEGk1vRE1IZG0Vf161UDpn+NlW4+UGubQflQ==
+  dependencies:
+    "@use-it/event-listener" "^0.1.2"
+
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"