(site) Add dark mode style (#258)

tmr08c · web-flow · commit 41a577731ad8 · 2021-09-05T19:05:26.000Z
Use Tailwind 2.0's ability to use class-based dark mode. The dark-mode switch comes from: - https://github.com/donavon/use-dark-mode - https://github.com/wKovacs64/gatsby-plugin-use-dark-mode - https://github.com/JoseRFelix/react-toggle-dark-mode To extend tailwind-typography, use the CSS @adamwathan shared in [this comment](tailwindlabs/tailwindcss-typography#69 (comment)).
diff --git 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
@@ -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
@@ -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
@@ -3,39 +3,44 @@ 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 />
               <path d="M125.896 398.928c0 33.683-27.308 60.999-61.022 60.999-33.684 0-61.006-27.316-61.006-60.999 0-33.729 27.322-61.038 61.006-61.038 33.714 0 61.022 27.308 61.022 61.038zM0 229.636c0 8.441 6.606 15.379 15.036 15.809 60.318 3.076 100.885 25.031 138.248 62.582 36.716 36.864 60.071 89.759 64.082 137.769.686 8.202 7.539 14.524 15.77 14.524h56.701c4.344 0 8.498-1.784 11.488-4.935a15.852 15.852 0 004.333-11.729c-8.074-158.152-130.669-278.332-289.013-286.23a15.846 15.846 0 00-11.709 4.344A15.848 15.848 0 000 173.247v56.389z" />
               <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
@@ -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
@@ -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
@@ -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
@@ -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,33 +36,33 @@
   * @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.
   *
   * If using `postcss-import`, use this import instead:
   *
   * @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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git a/yarn.lock b/yarn.lock
