add colorMode toggle

Author: amitojsingh366

beta/src/components/Layout/Nav/MobileNav.tsx

@@ -4,9 +4,9 @@
 
 import * as React from 'react';
 import cn from 'classnames';
-import {RouteItem} from 'components/Layout/useRouteMeta';
-import {useRouter} from 'next/router';
-import {SidebarRouteTree} from '../Sidebar';
+import { RouteItem } from 'components/Layout/useRouteMeta';
+import { useRouter } from 'next/router';
+import { SidebarRouteTree } from '../Sidebar';
 import sidebarHome from '../../../sidebarHome.json';
 import sidebarLearn from '../../../sidebarLearn.json';
 import sidebarReference from '../../../sidebarReference.json';
@@ -22,7 +22,7 @@ function inferSection(pathname: string): 'learn' | 'reference' | 'home' {
 }
 
 export function MobileNav() {
-  const {pathname} = useRouter();
+  const { pathname } = useRouter();
   const [section, setSection] = React.useState(() => inferSection(pathname));
 
   let tree = null;
@@ -40,7 +40,7 @@ export function MobileNav() {
 
   return (
     <>
-      <div className="sticky top-0 px-5 mb-2 bg-wash dark:bg-wash-dark flex justify-end border-b border-border dark:border-border-dark items-center self-center w-full z-10">
+      <div className="sticky top-0 px-5 mb-2 bg-transparent flex justify-end border-b border-border dark:border-border-dark items-center self-center w-full z-10">
         <TabButton
           isActive={section === 'home'}
           onClick={() => setSection('home')}>

beta/src/components/Layout/Nav/Nav.tsx

@@ -5,15 +5,15 @@
 import * as React from 'react';
 import cn from 'classnames';
 import NextLink from 'next/link';
-import {useRouter} from 'next/router';
+import { useRouter } from 'next/router';
 
-import {IconClose} from 'components/Icon/IconClose';
-import {IconHamburger} from 'components/Icon/IconHamburger';
-import {Search} from 'components/Search';
-import {MenuContext} from 'components/useMenu';
-
-import {Logo} from '../../Logo';
+import { IconClose } from 'components/Icon/IconClose';
+import { IconHamburger } from 'components/Icon/IconHamburger';
+import { Search } from 'components/Search';
+import { MenuContext } from 'components/useMenu';
+import { Logo } from '../../Logo';
 import NavLink from './NavLink';
+import { ColorMode, ThemeContext } from 'modules/ThemeProvider';
 
 const feedbackIcon = (
   <svg
@@ -90,18 +90,19 @@ function inferSection(pathname: string): 'learn' | 'reference' | 'home' {
 }
 
 export default function Nav() {
-  const {pathname} = useRouter();
-  const {isOpen, toggleOpen} = React.useContext(MenuContext);
-  // TODO: persist
+  const { pathname } = useRouter();
+  const { isOpen, toggleOpen } = React.useContext(MenuContext);
   // TODO: respect system pref
-  const [isDark, setIsDark] = React.useState(() => {
-    if (typeof document === 'undefined') {
-      return false;
-    }
-    return document.documentElement.classList.contains('dark');
-  });
+
+  // get the current colorMode
+  const { colorMode, setColorMode } = React.useContext(ThemeContext);
+
   const section = inferSection(pathname);
 
+  const toggleColorMode = React.useCallback(() => {
+    setColorMode(colorMode === ColorMode.dark ? ColorMode.light : ColorMode.dark)
+  }, [colorMode])
+
   function handleFeedback() {
     const nodes: any = document.querySelectorAll(
       '#_hj_feedback_container button'
@@ -115,7 +116,7 @@ export default function Nav() {
   }
 
   return (
-    <nav className="sticky top-0 items-center w-full flex lg:block justify-between bg-wash dark:bg-wash-dark pt-0 lg:pt-4 pr-5 lg:px-5 z-50">
+    <nav className="sticky top-0 items-center w-full flex lg:block justify-between bg-transparent pt-0 lg:pt-4 pr-5 lg:px-5 z-50">
       <div className="xl:w-full xl:max-w-xs flex items-center">
         <button
           type="button"
@@ -139,18 +140,10 @@ export default function Nav() {
         </div>
         <button
           type="button"
-          aria-label={isDark ? 'Use Light Mode' : 'Use Dark Mode'}
-          onClick={() => {
-            if (isDark) {
-              document.documentElement.classList.remove('dark');
-              setIsDark(false);
-            } else {
-              document.documentElement.classList.add('dark');
-              setIsDark(true);
-            }
-          }}
+          aria-label={colorMode === ColorMode.dark ? 'Use Light Mode' : 'Use Dark Mode'}
+          onClick={toggleColorMode}
           className="hidden lg:flex items-center h-full pr-2">
-          {isDark ? lightIcon : darkIcon}
+          {colorMode === ColorMode.dark ? lightIcon : darkIcon}
         </button>
       </div>
       <div className="px-0 pt-2 w-full 2xl:max-w-xs hidden lg:flex items-center self-center border-b-0 lg:border-b border-border dark:border-border-dark">
@@ -174,20 +167,12 @@ export default function Nav() {
         </button>
         <button
           type="button"
-          aria-label={isDark ? 'Use Light Mode' : 'Use Dark Mode'}
-          onClick={() => {
-            if (isDark) {
-              document.documentElement.classList.remove('dark');
-              setIsDark(false);
-            } else {
-              document.documentElement.classList.add('dark');
-              setIsDark(true);
-            }
-          }}
+          aria-label={colorMode === ColorMode.dark ? 'Use Light Mode' : 'Use Dark Mode'}
+          onClick={toggleColorMode}
           className="flex lg:hidden items-center p-1 h-full ml-4 lg:ml-6">
-          {isDark ? lightIcon : darkIcon}
+          {colorMode === ColorMode.dark ? lightIcon : darkIcon}
         </button>
       </div>
     </nav>
   );
-}
+}