From 2286122393501d66af4eaf20928e4b7843f15fc7 Mon Sep 17 00:00:00 2001
From: Amitoj Singh <amitojsingh366@gmail.com>
Date: Thu, 28 Oct 2021 21:32:44 +0300
Subject: [PATCH 1/3] create ThemeProvider

---
 beta/src/modules/ThemeProvider.tsx | 48 ++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 beta/src/modules/ThemeProvider.tsx

diff --git a/beta/src/modules/ThemeProvider.tsx b/beta/src/modules/ThemeProvider.tsx
new file mode 100644
index 00000000000..597a59e5e4a
--- /dev/null
+++ b/beta/src/modules/ThemeProvider.tsx
@@ -0,0 +1,48 @@
+import { createContext, Dispatch, FC, SetStateAction, useEffect, useMemo, useState } from "react";
+
+export enum ColorMode {
+    light = 'light',
+    dark = 'dark'
+}
+
+
+export const ThemeContext = createContext<{
+    colorMode: ColorMode,
+    setColorMode: Dispatch<SetStateAction<ColorMode>>
+}>({
+    colorMode: ColorMode.light,
+    setColorMode: () => { }
+});
+
+export const ThemeProvider: FC = ({ children }) => {
+    const [colorMode, setColorMode] = useState(ColorMode.light);
+    const colorModeKey = "@app/colorMode";
+
+    useEffect(() => {
+        const savedColorMode = localStorage.getItem(colorModeKey);
+        if (savedColorMode) setColorMode(savedColorMode as ColorMode)
+    }, [])
+
+
+    useEffect(() => {
+        localStorage.setItem(colorModeKey, colorMode);
+        if (!document) return;
+        colorMode === ColorMode.dark ?
+            document.documentElement.classList.add(ColorMode.dark) :
+            document.documentElement.classList.remove(ColorMode.dark)
+    }, [colorMode])
+
+
+    return (
+        <ThemeContext.Provider
+            value={useMemo(
+                () => ({
+                    colorMode,
+                    setColorMode
+                }),
+                [colorMode]
+            )}>
+            {children}
+        </ThemeContext.Provider>
+    )
+}
\ No newline at end of file

From 6b88724e11e6caf1afef78fe924ade9af9ffa2ab Mon Sep 17 00:00:00 2001
From: Amitoj Singh <amitojsingh366@gmail.com>
Date: Thu, 28 Oct 2021 21:33:25 +0300
Subject: [PATCH 2/3] add colorMode toggle

---
 beta/src/components/Layout/Nav/MobileNav.tsx | 10 +--
 beta/src/components/Layout/Nav/Nav.tsx       | 65 ++++++++------------
 2 files changed, 30 insertions(+), 45 deletions(-)

diff --git a/beta/src/components/Layout/Nav/MobileNav.tsx b/beta/src/components/Layout/Nav/MobileNav.tsx
index a6b6cc919b0..90ed70e0d28 100644
--- 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
index af8f2066ba7..e938eaeddde 100644
--- 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>
   );
-}
+}
\ No newline at end of file

From 86cf0e6b720d4eabce8da2aca1ba4bfd3ee141c9 Mon Sep 17 00:00:00 2001
From: Amitoj Singh <amitojsingh366@gmail.com>
Date: Thu, 28 Oct 2021 21:34:02 +0300
Subject: [PATCH 3/3] make other components dark mode compatible

---
 beta/src/components/Layout/Page.tsx           | 16 ++++-----
 .../src/components/Layout/Sidebar/Sidebar.tsx | 22 ++++++------
 .../components/MDX/CodeBlock/CodeBlock.tsx    | 26 +++++++++-----
 .../components/MDX/Sandpack/CustomPreset.tsx  | 27 +++++++++------
 beta/src/components/MDX/Sandpack/Preview.tsx  | 22 ++++++------
 beta/src/components/MDX/Sandpack/Themes.tsx   | 29 +++++++++++++++-
 beta/src/components/Search.tsx                | 22 ++++++------
 beta/src/pages/_app.tsx                       | 17 ++++++----
 beta/src/pages/_document.tsx                  |  4 +--
 beta/src/styles/sandpack.css                  | 34 +++++++++++--------
 10 files changed, 135 insertions(+), 84 deletions(-)

diff --git a/beta/src/components/Layout/Page.tsx b/beta/src/components/Layout/Page.tsx
index 7cbf2505260..700114b84ec 100644
--- 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
index 5a5b6c5f1f3..24e62548a1a 100644
--- 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
index 55d5e069901..4441dfa256c 100644
--- 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,
     };
   });
-}
+}
\ No newline at end of file
diff --git a/beta/src/components/MDX/Sandpack/CustomPreset.tsx b/beta/src/components/MDX/Sandpack/CustomPreset.tsx
index 9772c0a162e..ae233ffcead 100644
--- a/beta/src/components/MDX/Sandpack/CustomPreset.tsx
+++ b/beta/src/components/MDX/Sandpack/CustomPreset.tsx
@@ -2,7 +2,7 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import React from 'react';
+import React, { useContext } from 'react';
 import {
   useSandpack,
   useActiveCode,
@@ -10,10 +10,11 @@ import {
   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>
     </>
   );
-}
+}
\ No newline at end of file
diff --git a/beta/src/components/MDX/Sandpack/Preview.tsx b/beta/src/components/MDX/Sandpack/Preview.tsx
index 44c73c03921..85f1dadaa41 100644
--- a/beta/src/components/MDX/Sandpack/Preview.tsx
+++ b/beta/src/components/MDX/Sandpack/Preview.tsx
@@ -4,11 +4,11 @@
 
 /* eslint-disable react-hooks/exhaustive-deps */
 import * as React from 'react';
-import {useSandpack, LoadingOverlay} from '@codesandbox/sandpack-react';
+import { useSandpack, LoadingOverlay } from '@codesandbox/sandpack-react';
 import cn from 'classnames';
 
-import {Error} from './Error';
-import {computeViewportSize, generateRandomId} from './utils';
+import { Error } from './Error';
+import { computeViewportSize, generateRandomId } from './utils';
 
 type CustomPreviewProps = {
   className?: string;
@@ -33,7 +33,7 @@ export function Preview({
   isExpanded,
   className,
 }: CustomPreviewProps) {
-  const {sandpack, listen} = useSandpack();
+  const { sandpack, listen } = useSandpack();
   const [isReady, setIsReady] = React.useState(false);
   const [iframeComputedHeight, setComputedAutoHeight] = React.useState<
     number | null
@@ -94,9 +94,9 @@ export function Preview({
   const viewportStyle = computeViewportSize('auto', 'portrait');
   const overrideStyle = error
     ? {
-        // Don't collapse errors
-        maxHeight: undefined,
-      }
+      // Don't collapse errors
+      maxHeight: undefined,
+    }
     : null;
   const hideContent = !isReady || error;
 
@@ -136,17 +136,17 @@ export function Preview({
       }}>
       <div
         className={cn(
-          'p-0 sm:p-2 md:p-4 lg:p-8 bg-card dark:bg-wash-dark h-full relative rounded-b-lg lg:rounded-b-none'
+          'p-0 sm:p-2 md:p-4 lg:p-8 bg-card dark:bg-transparent h-full relative rounded-b-lg lg:rounded-b-none'
         )}
-        style={{overflow}}>
+        style={{ overflow }}>
         <div
           style={{
             padding: 'initial',
             position: hideContent
               ? 'relative'
               : isExpanded
-              ? 'sticky'
-              : undefined,
+                ? 'sticky'
+                : undefined,
             top: isExpanded ? '2rem' : undefined,
           }}>
           <iframe
diff --git a/beta/src/components/MDX/Sandpack/Themes.tsx b/beta/src/components/MDX/Sandpack/Themes.tsx
index 599fbea1fde..3a220b7769a 100644
--- a/beta/src/components/MDX/Sandpack/Themes.tsx
+++ b/beta/src/components/MDX/Sandpack/Themes.tsx
@@ -2,7 +2,7 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {githubLightTheme, SandpackTheme} from '@codesandbox/sandpack-react';
+import { githubLightTheme, codesandboxDarkTheme, SandpackTheme } from '@codesandbox/sandpack-react';
 import tailwindConfig from '../../../../tailwind.config';
 
 export const GithubLightTheme: SandpackTheme = {
@@ -17,6 +17,18 @@ export const GithubLightTheme: SandpackTheme = {
   },
 };
 
+export const CodesandboxDarkTheme: SandpackTheme = {
+  ...codesandboxDarkTheme,
+
+  typography: {
+    ...codesandboxDarkTheme.typography,
+    bodyFont: tailwindConfig.theme.extend.fontFamily.sans.join(', '),
+    monoFont: tailwindConfig.theme.extend.fontFamily.mono.join(', '),
+    fontSize: tailwindConfig.theme.extend.fontSize.code,
+    lineHeight: '24px',
+  },
+};
+
 export const CodeBlockLightTheme: SandpackTheme = {
   ...githubLightTheme,
   palette: {
@@ -31,3 +43,18 @@ export const CodeBlockLightTheme: SandpackTheme = {
     lineHeight: '24px',
   },
 };
+
+export const CodeBlockDarkTheme: SandpackTheme = {
+  ...codesandboxDarkTheme,
+  palette: {
+    ...codesandboxDarkTheme.palette,
+    defaultBackground: 'transparent',
+  },
+  typography: {
+    ...codesandboxDarkTheme.typography,
+    bodyFont: tailwindConfig.theme.extend.fontFamily.sans.join(', '),
+    monoFont: tailwindConfig.theme.extend.fontFamily.mono.join(', '),
+    fontSize: tailwindConfig.theme.extend.fontSize.code,
+    lineHeight: '24px',
+  },
+};
\ No newline at end of file
diff --git a/beta/src/components/Search.tsx b/beta/src/components/Search.tsx
index a531a06190a..1c882d71704 100644
--- a/beta/src/components/Search.tsx
+++ b/beta/src/components/Search.tsx
@@ -3,14 +3,14 @@
  */
 
 // @ts-ignore
-import {useDocSearchKeyboardEvents} from '@docsearch/react';
-import {IconSearch} from 'components/Icon/IconSearch';
+import { useDocSearchKeyboardEvents } from '@docsearch/react';
+import { IconSearch } from 'components/Icon/IconSearch';
 import Head from 'next/head';
 import Link from 'next/link';
 import Router from 'next/router';
 import * as React from 'react';
-import {createPortal} from 'react-dom';
-import {siteConfig} from 'siteConfig';
+import { createPortal } from 'react-dom';
+import { siteConfig } from 'siteConfig';
 
 export interface SearchProps {
   appId?: string;
@@ -20,7 +20,7 @@ export interface SearchProps {
   renderModal?: boolean;
 }
 
-function Hit({hit, children}: any) {
+function Hit({ hit, children }: any) {
   return (
     <Link href={hit.url.replace()}>
       <a>{children}</a>
@@ -28,11 +28,11 @@ function Hit({hit, children}: any) {
   );
 }
 
-function Kbd(props: {children?: React.ReactNode}) {
+function Kbd(props: { children?: React.ReactNode }) {
   return (
     <kbd
-      className="border border-transparent mr-1 bg-wash dark:bg-wash-dark text-gray-30 align-middle p-0 inline-flex justify-center items-center  text-xs text-center rounded"
-      style={{width: '2.25em', height: '2.25em'}}
+      className="border border-transparent mr-1 bg-transparent text-gray-30 align-middle p-0 inline-flex justify-center items-center  text-xs text-center rounded"
+      style={{ width: '2.25em', height: '2.25em' }}
       {...props}
     />
   );
@@ -61,7 +61,7 @@ export const Search: React.FC<SearchProps> = ({
 
       // @ts-ignore
       return Promise.all([import('@docsearch/react/modal')]).then(
-        ([{DocSearchModal: Modal}]) => {
+        ([{ DocSearchModal: Modal }]) => {
           DocSearchModal = Modal;
         }
       );
@@ -85,7 +85,7 @@ export const Search: React.FC<SearchProps> = ({
     [setIsShowing]
   );
 
-  useDocSearchKeyboardEvents({isOpen: isShowing, onOpen, onClose});
+  useDocSearchKeyboardEvents({ isOpen: isShowing, onOpen, onClose });
 
   return (
     <>
@@ -124,7 +124,7 @@ export const Search: React.FC<SearchProps> = ({
             searchParameters={searchParameters}
             onClose={onClose}
             navigator={{
-              navigate({itemUrl}: any) {
+              navigate({ itemUrl }: any) {
                 Router.push(itemUrl);
               },
             }}
diff --git a/beta/src/pages/_app.tsx b/beta/src/pages/_app.tsx
index 01c3ca7dc38..f0c1e00e6f4 100644
--- a/beta/src/pages/_app.tsx
+++ b/beta/src/pages/_app.tsx
@@ -3,21 +3,22 @@
  */
 
 import * as React from 'react';
-import {AppProps} from 'next/app';
+import { AppProps } from 'next/app';
 import '@docsearch/css';
 import '../styles/fonts.css';
 import '../styles/algolia.css';
 import '../styles/index.css';
 import '../styles/sandpack.css';
 import '@codesandbox/sandpack-react/dist/index.css';
-import {hotjar} from 'utils/hotjar';
+import { ThemeProvider } from 'modules/ThemeProvider';
+import { hotjar } from 'utils/hotjar';
 if (typeof window !== 'undefined') {
   hotjar(process.env.NEXT_PUBLIC_HJ_SITE_ID, process.env.NEXT_PUBLIC_HJ_SITE_V);
 }
 
-const EmptyAppShell: React.FC = ({children}) => <>{children}</>;
+const EmptyAppShell: React.FC = ({ children }) => <>{children}</>;
 
-export default function MyApp({Component, pageProps}: AppProps) {
+export default function MyApp({ Component, pageProps }: AppProps) {
   let AppShell = (Component as any).appShell || EmptyAppShell;
   // In order to make sidebar scrolling between pages work as expected
   // we need to access the underlying MDX component.
@@ -33,8 +34,10 @@ export default function MyApp({Component, pageProps}: AppProps) {
     }
   }, []);
   return (
-    <AppShell>
-      <Component {...pageProps} />
-    </AppShell>
+    <ThemeProvider>
+      <AppShell>
+        <Component {...pageProps} />
+      </AppShell>
+    </ThemeProvider>
   );
 }
diff --git a/beta/src/pages/_document.tsx b/beta/src/pages/_document.tsx
index a948e9d8999..f7c22d71620 100644
--- a/beta/src/pages/_document.tsx
+++ b/beta/src/pages/_document.tsx
@@ -3,7 +3,7 @@
  */
 
 import * as React from 'react';
-import Document, {Html, Head, Main, NextScript} from 'next/document';
+import Document, { Html, Head, Main, NextScript } from 'next/document';
 
 class MyDocument extends Document {
   render() {
@@ -11,7 +11,7 @@ class MyDocument extends Document {
     return (
       <Html lang="en">
         <Head />
-        <body className="font-sans antialiased text-lg bg-wash dark:bg-wash-dark text-secondary dark:text-secondary-dark leading-base">
+        <body className="font-sans antialiased text-lg bg-transparent text-secondary dark:text-secondary-dark leading-base">
           <Main />
           <NextScript />
         </body>
diff --git a/beta/src/styles/sandpack.css b/beta/src/styles/sandpack.css
index 589d79f02e2..c7622b104a7 100644
--- a/beta/src/styles/sandpack.css
+++ b/beta/src/styles/sandpack.css
@@ -3,30 +3,30 @@
  */
 
 .sp-tabs .sp-tab-button {
-  color: #087EA4;
+  color: #087ea4;
   padding: 0 4px;
 }
 
 html.dark .sp-tabs .sp-tab-button {
-  color: #149ECA;
+  color: #149eca;
 }
 
 .sp-tabs .sp-tab-button:hover {
-  color: #087EA4;
+  color: #087ea4;
 }
 
 html.dark .sp-tabs .sp-tab-button:hover {
-  color: #149ECA;
+  color: #149eca;
 }
 
 .sp-tabs .sp-tab-button[data-active='true'] {
-  color: #087EA4;
-  border-bottom: 2px solid #087EA4;
+  color: #087ea4;
+  border-bottom: 2px solid #087ea4;
 }
 
 html.dark .sp-tabs .sp-tab-button[data-active='true'] {
-  color: #149ECA;
-  border-bottom: 2px solid #149ECA;
+  color: #149eca;
+  border-bottom: 2px solid #149eca;
 }
 
 .sp-stack .sp-code-editor,
@@ -60,7 +60,7 @@ html.dark .sp-tabs .sp-tab-button[data-active='true'] {
  *
  * If you know a better way to keep them from diverging, send a PR.
  */
- .sp-layout {
+.sp-layout {
   border-bottom-left-radius: 0.5rem !important;
   border-bottom-right-radius: 0.5rem !important;
 }
@@ -68,9 +68,15 @@ html.dark .sp-tabs .sp-tab-button[data-active='true'] {
 .cm-activeLine {
   background: rgba(245, 247, 250, var(--tw-bg-opacity)) !important;
 }
+html.dark .cm-activeLine {
+  background: rgba(245, 247, 250, 0.1) !important;
+}
 .sp-code-editor {
   background: white !important;
 }
+html.dark .sp-code-editor {
+  background: transparent !important;
+}
 .sp-stack {
   height: initial !important;
   width: fit-content !important;
@@ -99,18 +105,18 @@ html.dark .sp-tabs .sp-tab-button[data-active='true'] {
 }
 .sp-layout {
   overflow: initial !important;
-  border:0px solid transparent !important;
+  border: 0px solid transparent !important;
   border-top-left-radius: 0px !important;
   border-top-right-radius: 0px !important;
 }
-html.dark .sp-layout>:not(:first-child) {
-  border-color: #343A46;
+html.dark .sp-layout > :not(:first-child) {
+  border-color: #343a46;
 }
 html.dark .sp-layout {
-  background-color: #343A46;
+  background-color: #343a46;
 }
 html.dark .sp-loading {
-  background-color: #23272F;
+  background-color: #23272f;
 }
 
 @media (min-width: 768px) {