add dark theme toggle

gatsby-config.js

@@ -51,6 +51,7 @@ module.exports = {
         ],
       },
     },
+    'gatsby-plugin-dark-mode',
     'gatsby-transformer-sharp',
     'gatsby-plugin-sharp',
     {

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "gatsby": "^2.19.7",
     "gatsby-image": "^2.2.39",
+    "gatsby-plugin-dark-mode": "^1.1.1",
     "gatsby-plugin-feed": "^2.3.26",
     "gatsby-plugin-google-analytics": "^2.1.34",
     "gatsby-plugin-manifest": "^2.2.39",

src/components/layout/layout.css

@@ -0,0 +1,20 @@
+
+body {
+  --bg: white;
+  --textNormal: #222;
+  --textTitle: #222;
+  --textLink: #62b61e;
+  --hr: hsla(0, 0%, 0%, 0.2);
+
+  background-color: var(--bg);
+}
+
+body.dark {
+  -webkit-font-smoothing: antialiased;
+
+  --bg: darkslategray;
+  --textNormal: rgba(255, 255, 255, 0.88);
+  --textTitle: white;
+  --textLink: yellow;
+  --hr: hsla(0, 0%, 100%, 0.2);
+}

src/components/layout/layout.js

@@ -3,6 +3,9 @@ import { Link } from 'gatsby';
 
 import { PropTypes } from 'prop-types';
 import { rhythm, scale } from '../../utils/typography';
+import ThemeToggle from '../theme-toggle/theme-toggle';
+
+import './layout.css';
 
 const Layout = ({ location, title, children }) => {
   // eslint-disable-next-line no-undef
@@ -61,6 +64,7 @@ const Layout = ({ location, title, children }) => {
       }}
     >
       <header>{header}</header>
+      <ThemeToggle />
       <main>{children}</main>
       <footer>
         ©
@@ -81,7 +85,9 @@ const Layout = ({ location, title, children }) => {
 };
 
 Layout.propTypes = {
-  location: PropTypes.string.isRequired,
+  location: PropTypes.shape({
+    pathname: PropTypes.string,
+  }).isRequired,
   title: PropTypes.string.isRequired,
   children: PropTypes.oneOfType([
     PropTypes.arrayOf(PropTypes.node),

src/components/theme-toggle/theme-toggle.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { ThemeToggler } from 'gatsby-plugin-dark-mode';
+
+function ThemeToggle() {
+  return (
+    <ThemeToggler>
+      {({ theme, toggleTheme }) => (
+        <label htmlFor="themeToggle">
+          <input
+            id="themeToggle"
+            type="checkbox"
+            onChange={(e) => toggleTheme(e.target.checked ? 'dark' : 'light')}
+            checked={theme === 'dark'}
+          />
+          {' '}
+          Dark mode
+        </label>
+      )}
+    </ThemeToggler>
+  );
+}
+
+export default ThemeToggle;

src/components/theme-toggle/theme-toggle.test.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import ThemeToggle from './theme-toggle';
+
+const setup = () => {
+  const utils = render(<ThemeToggle />);
+  const toggle = utils.getByLabelText('Dark mode');
+  // by default, document is light
+  utils.container.classList.add('light');
+  return {
+    toggle,
+    ...utils,
+  };
+};
+
+describe('ThemeToggle', () => {
+  it('renders an input', async () => {
+    const { toggle } = setup();
+    expect(toggle).not.toBeNull();
+  });
+
+  it('toggles document.body class', async () => {
+    const { toggle, container } = setup();
+    // mock function called by gatsby-plugin-dark-theme
+    // eslint-disable-next-line no-underscore-dangle
+    global.__setPreferredTheme = jest.fn(() => {
+      container.classList.toggle('light');
+      container.classList.toggle('dark');
+    });
+
+    fireEvent.click(toggle);
+    expect(container).toHaveClass('dark');
+    expect(container).not.toHaveClass('light');
+
+    // check second click changes class to "light"
+    fireEvent.click(toggle);
+    expect(container).toHaveClass('light');
+    expect(container).not.toHaveClass('dark');
+  });
+});

src/pages/index.js

@@ -13,36 +13,44 @@ const BlogIndex = ({ data, location }) => {
   const posts = data.allMarkdownRemark.edges;
 
   return (
-    <Layout location={location} title={siteTitle}>
-      <SEO title="All posts" />
-      <Bio />
-      {posts.map(({ node }) => {
-        const title = node.frontmatter.title || node.fields.slug;
-        return (
-          <article key={node.fields.slug}>
-            <header>
-              <h3
-                style={{
-                  marginBottom: rhythm(1 / 4),
-                }}
-              >
-                <Link style={{ boxShadow: 'none' }} to={node.fields.slug}>
-                  {title}
-                </Link>
-              </h3>
-              <small>{node.frontmatter.date}</small>
-            </header>
-            <section>
-              <p
-                dangerouslySetInnerHTML={{
-                  __html: node.frontmatter.description || node.excerpt,
-                }}
-              />
-            </section>
-          </article>
-        );
-      })}
-    </Layout>
+    <div style={{
+      backgroundColor: 'var(--bg)',
+      color: 'var(--textNormal)',
+      transition: 'color 0.2s ease, background 0.2s ease-out',
+    }}
+    >
+      <Layout location={location} title={siteTitle}>
+        <SEO title="All posts" />
+        <Bio />
+        {posts.map(({ node }) => {
+          const title = node.frontmatter.title || node.fields.slug;
+          return (
+            <article key={node.fields.slug}>
+              <header>
+                <h3
+                  style={{
+                    marginBottom: rhythm(1 / 4),
+                  }}
+                >
+                  <Link style={{ boxShadow: 'none' }} to={node.fields.slug}>
+                    {title}
+                  </Link>
+                </h3>
+                <small>{node.frontmatter.date}</small>
+              </header>
+              <section>
+                <p
+                  dangerouslySetInnerHTML={{
+                    __html: node.frontmatter.description || node.excerpt,
+                  }}
+                />
+              </section>
+            </article>
+          );
+        })}
+      </Layout>
+    </div>
+
   );
 };
 

src/utils/typography.js

@@ -5,6 +5,20 @@ Wordpress2016.overrideThemeStyles = () => ({
   'a.gatsby-resp-image-link': {
     boxShadow: 'none',
   },
+  a: {
+    color: 'var(--textLink)',
+  },
+  // gatsby-remark-autolink-headers - don't underline when hidden
+  'a.anchor': {
+    boxShadow: 'none',
+  },
+  // gatsby-remark-autolink-headers - use theme colours for the link icon
+  'a.anchor svg[aria-hidden="true"]': {
+    stroke: 'var(--textLink)',
+  },
+  hr: {
+    background: 'var(--hr)',
+  },
 });
 
 delete Wordpress2016.googleFonts;