feat: Add dark mode toggle to the header

newrelic · Jun 23, 2020 · 670c726 · 670c726
1 parent 1aaa856
commit 670c726
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git 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
@@ -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