reactjs · amitojsingh366 · Oct 28, 2021 · Oct 28, 2021 · Oct 28, 2021
diff --git a/beta/src/components/Layout/Nav/MobileNav.tsx b/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')}>

diff --git a/beta/src/components/Layout/Nav/Nav.tsx b/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>
   );
-}
+}
diff --git a/beta/src/components/Layout/Page.tsx b/beta/src/components/Layout/Page.tsx
@@ -2,22 +2,22 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {MenuProvider} from 'components/useMenu';
+import { MenuProvider } from 'components/useMenu';
 import * as React from 'react';
-import {Nav} from './Nav';
-import {RouteItem, SidebarContext} from './useRouteMeta';
-import {Sidebar} from './Sidebar';
-import {Footer} from './Footer';
+import { Nav } from './Nav';
+import { RouteItem, SidebarContext } from './useRouteMeta';
+import { Sidebar } from './Sidebar';
+import { Footer } from './Footer';
 interface PageProps {
   children: React.ReactNode;
   routeTree: RouteItem;
 }
 
-export function Page({routeTree, children}: PageProps) {
+export function Page({ routeTree, children }: PageProps) {
   return (
     <MenuProvider>
       <SidebarContext.Provider value={routeTree}>
-        <div className="h-auto lg:h-screen flex flex-row">
+        <div className=" bg-wash dark:bg-wash-dark transition-colors duration-500">
           <div className="h-auto lg:h-full overflow-y-scroll fixed flex flex-row lg:flex-col py-0 top-0 left-0 right-0 lg:max-w-xs w-full shadow lg:shadow-none z-50">
             <Nav />
             <Sidebar />
@@ -27,7 +27,7 @@ export function Page({routeTree, children}: PageProps) {
             <div className="w-full min-w-0">
               <main
                 className="flex flex-1 self-stretch flex-col items-end"
-                style={{justifyContent: 'space-around'}}>
+                style={{ justifyContent: 'space-around' }}>
                 {children}
                 <Footer />
               </main>

diff --git a/beta/src/components/Layout/Sidebar/Sidebar.tsx b/beta/src/components/Layout/Sidebar/Sidebar.tsx
@@ -4,18 +4,18 @@
 
 import * as React from 'react';
 import cn from 'classnames';
-import {SidebarContext} from 'components/Layout/useRouteMeta';
-import {MenuContext} from 'components/useMenu';
-import {useMediaQuery} from '../useMediaQuery';
-import {SidebarRouteTree} from './SidebarRouteTree';
-import {Search} from 'components/Search';
-import {Button} from 'components/Button';
-import {MobileNav} from '../Nav/MobileNav';
+import { SidebarContext } from 'components/Layout/useRouteMeta';
+import { MenuContext } from 'components/useMenu';
+import { useMediaQuery } from '../useMediaQuery';
+import { SidebarRouteTree } from './SidebarRouteTree';
+import { Search } from 'components/Search';
+import { Button } from 'components/Button';
+import { MobileNav } from '../Nav/MobileNav';
 
 const SIDEBAR_BREAKPOINT = 1023;
 
-export function Sidebar({isMobileOnly}: {isMobileOnly?: boolean}) {
-  const {menuRef, isOpen} = React.useContext(MenuContext);
+export function Sidebar({ isMobileOnly }: { isMobileOnly?: boolean }) {
+  const { menuRef, isOpen } = React.useContext(MenuContext);
   const isMobileSidebar = useMediaQuery(SIDEBAR_BREAKPOINT);
   let routeTree = React.useContext(SidebarContext);
   const isHidden = isMobileOnly && !isMobileSidebar;
@@ -62,7 +62,7 @@ export function Sidebar({isMobileOnly}: {isMobileOnly?: boolean}) {
   return (
     <aside
       className={cn(
-        `lg:flex-grow lg:flex flex-col w-full pt-4 pb-8 lg:pb-0 lg:max-w-xs fixed lg:sticky bg-wash dark:bg-wash-dark z-10`,
+        `lg:flex-grow lg:flex flex-col w-full pt-4 pb-8 lg:pb-0 lg:max-w-xs fixed lg:sticky bg-transparent z-10`,
         isOpen ? 'block z-40' : 'hidden lg:block'
       )}
       aria-hidden={isHidden ? 'true' : 'false'}
@@ -76,7 +76,7 @@ export function Sidebar({isMobileOnly}: {isMobileOnly?: boolean}) {
       <nav
         role="navigation"
         ref={menuRef}
-        style={{'--bg-opacity': '.2'} as React.CSSProperties} // Need to cast here because CSS vars aren't considered valid in TS types (cuz they could be anything)
+        style={{ '--bg-opacity': '.2' } as React.CSSProperties} // Need to cast here because CSS vars aren't considered valid in TS types (cuz they could be anything)
         className="w-full h-screen lg:h-auto flex-grow pr-0 lg:pr-5 pt-6 pb-16 lg:pb-0 lg:py-6 md:pt-4 lg:pt-4 overflow-y-scroll lg:overflow-y-auto scrolling-touch scrolling-gpu">
         {isMobileSidebar ? (
           <MobileNav />

diff --git a/beta/src/components/MDX/CodeBlock/CodeBlock.tsx b/beta/src/components/MDX/CodeBlock/CodeBlock.tsx
@@ -12,8 +12,9 @@ import {
 } from '@codesandbox/sandpack-react';
 import rangeParser from 'parse-numeric-range';
 
-import {CodeBlockLightTheme} from '../Sandpack/Themes';
+import { CodeBlockDarkTheme, CodeBlockLightTheme } from '../Sandpack/Themes';
 import styles from './CodeBlock.module.css';
+import { ColorMode, ThemeContext } from 'modules/ThemeProvider';
 
 interface InlineHiglight {
   step: number;
@@ -56,7 +57,7 @@ const CodeBlock = React.forwardRef(
       const inlineHighlightConfig = inlineHighlightLines.map(
         (line: InlineHiglight) => ({
           ...line,
-          elementAttributes: {'data-step': `${line.step}`},
+          elementAttributes: { 'data-step': `${line.step}` },
           className: cn(
             'code-step bg-opacity-10 relative rounded-md p-1 ml-2',
             {
@@ -77,13 +78,22 @@ const CodeBlock = React.forwardRef(
     const language = className.substring(9);
     const filename = '/index.' + language;
     const decorators = getDecoratedLineInfo();
+
+    // get current color mode
+    const { colorMode } = React.useContext(ThemeContext);
     return (
       <div
         translate="no"
         className={cn(
-          'rounded-lg h-full w-full overflow-x-auto flex items-center bg-white shadow-lg',
+          'rounded-lg h-full w-full overflow-x-auto flex items-center bg-white dark:bg-transparent shadow-lg',
           !noMargin && 'my-8'
-        )}>
+        )}
+        style={colorMode === ColorMode.dark ?
+          {
+            borderColor: '#343A46',
+            borderWidth: '1px'
+          } : {}}
+      >
         <SandpackProvider
           customSetup={{
             entry: filename,
@@ -93,7 +103,7 @@ const CodeBlock = React.forwardRef(
               },
             },
           }}>
-          <SandpackThemeProvider theme={CodeBlockLightTheme}>
+          <SandpackThemeProvider theme={colorMode === ColorMode.dark ? CodeBlockDarkTheme : CodeBlockLightTheme}>
             <ClasserProvider
               classes={{
                 'sp-cm': styles.codeViewer,
@@ -161,8 +171,8 @@ function getInlineHighlights(metastring: string, code: string) {
       if (fromIndex === undefined) {
         throw Error(
           "Found '" +
-            substr +
-            "' twice. Specify fromIndex as the fourth value in the tuple."
+          substr +
+          "' twice. Specify fromIndex as the fourth value in the tuple."
         );
       }
       index = line.indexOf(substr, fromIndex);
@@ -177,4 +187,4 @@ function getInlineHighlights(metastring: string, code: string) {
       endColumn: index + substr.length,
     };
   });
-}
+}
diff --git a/beta/src/components/MDX/Sandpack/CustomPreset.tsx b/beta/src/components/MDX/Sandpack/CustomPreset.tsx
@@ -2,18 +2,19 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import React from 'react';
+import React, { useContext } from 'react';
 import {
   useSandpack,
   useActiveCode,
   SandpackCodeEditor,
   SandpackThemeProvider,
 } from '@codesandbox/sandpack-react';
 
-import {IconChevron} from 'components/Icon/IconChevron';
-import {NavigationBar} from './NavigationBar';
-import {Preview} from './Preview';
-import {GithubLightTheme} from './Themes';
+import { IconChevron } from 'components/Icon/IconChevron';
+import { NavigationBar } from './NavigationBar';
+import { Preview } from './Preview';
+import { CodesandboxDarkTheme, GithubLightTheme } from './Themes';
+import { ColorMode, ThemeContext } from 'modules/ThemeProvider';
 
 export function CustomPreset({
   isSingleFile,
@@ -22,12 +23,12 @@ export function CustomPreset({
   isSingleFile: boolean;
   onReset: () => void;
 }) {
-  const lineCountRef = React.useRef<{[key: string]: number}>({});
-  const {sandpack} = useSandpack();
-  const {code} = useActiveCode();
+  const lineCountRef = React.useRef<{ [key: string]: number }>({});
+  const { sandpack } = useSandpack();
+  const { code } = useActiveCode();
   const [isExpanded, setIsExpanded] = React.useState(false);
 
-  const {activePath} = sandpack;
+  const { activePath } = sandpack;
   if (!lineCountRef.current[activePath]) {
     lineCountRef.current[activePath] = code.split('\n').length;
   }
@@ -41,11 +42,14 @@ export function CustomPreset({
     return isExpanded ? editorHeight : 406;
   };
 
+  // get the current colorMode
+  const { colorMode } = useContext(ThemeContext);
+
   return (
     <>
       <div className="shadow-lg dark:shadow-lg-dark rounded-lg">
         <NavigationBar showDownload={isSingleFile} onReset={onReset} />
-        <SandpackThemeProvider theme={GithubLightTheme}>
+        <SandpackThemeProvider theme={colorMode === ColorMode.dark ? CodesandboxDarkTheme : GithubLightTheme}>
           <div
             ref={sandpack.lazyAnchorRef}
             className="sp-layout rounded-t-none"
@@ -55,6 +59,7 @@ export function CustomPreset({
               minHeight: 216,
             }}>
             <SandpackCodeEditor
+
               customStyle={{
                 height: getHeight(),
                 maxHeight: isExpanded ? '' : 406,
@@ -90,4 +95,4 @@ export function CustomPreset({
       </div>
     </>
   );
-}
+}