From 670c7265aa41a23f220bd0a9c938d5f7e6a7f8e2 Mon Sep 17 00:00:00 2001
From: Jerel Miller <jerelmiller@gmail.com>
Date: Mon, 22 Jun 2020 22:48:42 -0700
Subject: [PATCH] feat: Add dark mode toggle to the header

---
 src/components/FeatherIcon.js  | 3 ++-
 src/components/GlobalHeader.js | 9 +++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/FeatherIcon.js b/src/components/FeatherIcon.js
index 273fed943..6ad6cae82 100644
--- a/src/components/FeatherIcon.js
+++ b/src/components/FeatherIcon.js
@@ -3,11 +3,12 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import styles from './FeatherIcon.module.scss';
 
-const FeatherIcon = ({ className, name, size = '1em' }) => {
+const FeatherIcon = ({ className, name, size = '1em', ...props }) => {
   const paths = ICONS[name];
 
   return paths ? (
     <svg
+      {...props}
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
       className={cx(styles.icon, className)}
diff --git a/src/components/GlobalHeader.js b/src/components/GlobalHeader.js
index 63b9c4a80..e5822f90c 100644
--- a/src/components/GlobalHeader.js
+++ b/src/components/GlobalHeader.js
@@ -7,11 +7,13 @@ import { githubBaseUrl } from '../data/constants';
 import NewRelicLogo from './NewRelicLogo';
 import ExternalLink from './ExternalLink';
 import FeatherIcon from './FeatherIcon';
+import useDarkMode from 'use-dark-mode';
 
 import styles from './GlobalHeader.module.scss';
 
 const GlobalHeader = ({ className }) => {
   const { fileRelativePath } = useContext(PageContext);
+  const darkMode = useDarkMode(false);
 
   return (
     <div className={cx(styles.globalHeaderContainer, className)}>
@@ -58,6 +60,13 @@ const GlobalHeader = ({ className }) => {
         </div>
 
         <ul className={styles.rightSideButtons}>
+          <li className={styles.rightSideButton}>
+            <FeatherIcon
+              name={darkMode.value ? 'sun' : 'moon'}
+              size="1rem"
+              onClick={darkMode.toggle}
+            />
+          </li>
           {fileRelativePath && (
             <li className={styles.rightSideButton}>
               <ExternalLink