diff --git a/beta/colors.js b/beta/colors.js
index 1c3e26f11ba..bac74d41e9d 100644
--- a/beta/colors.js
+++ b/beta/colors.js
@@ -23,6 +23,7 @@ module.exports = {
   'secondary-button-dark': '#404756', // gray-70
 
   // Gray
+  'gray-95': '#16181D',
   'gray-90': '#23272F',
   'gray-80': '#343A46',
   'gray-70': '#404756',
diff --git a/beta/src/components/Layout/Nav/MobileNav.tsx b/beta/src/components/Layout/Nav/MobileNav.tsx
index a6b6cc919b0..22814bd4db8 100644
--- a/beta/src/components/Layout/Nav/MobileNav.tsx
+++ b/beta/src/components/Layout/Nav/MobileNav.tsx
@@ -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..2d3564d1a22 100644
--- a/beta/src/components/Layout/Nav/Nav.tsx
+++ b/beta/src/components/Layout/Nav/Nav.tsx
@@ -5,15 +5,16 @@
 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 { 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 { Logo } from '../../Logo';
 import NavLink from './NavLink';
+import { ColorMode, ThemeContext } from 'modules/ThemeProvider';
 
 const feedbackIcon = (
   <svg
@@ -90,16 +91,9 @@ function inferSection(pathname: string): 'learn' | 'reference' | 'home' {
 }
 
 export default function Nav() {
-  const {pathname} = useRouter();
-  const {isOpen, toggleOpen} = React.useContext(MenuContext);
-  // TODO: persist
-  // TODO: respect system pref
-  const [isDark, setIsDark] = React.useState(() => {
-    if (typeof document === 'undefined') {
-      return false;
-    }
-    return document.documentElement.classList.contains('dark');
-  });
+  const { pathname } = useRouter();
+  const { isOpen, toggleOpen } = React.useContext(MenuContext);
+  const { colorMode, setColorMode } = React.useContext(ThemeContext);
   const section = inferSection(pathname);
 
   function handleFeedback() {
@@ -114,8 +108,14 @@ export default function Nav() {
     }
   }
 
+  const toggleColorMode = React.useCallback(() => {
+    setColorMode(
+      colorMode === ColorMode.dark ? ColorMode.light : ColorMode.dark
+    );
+  }, [colorMode]);
+
   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 +139,12 @@ 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,18 +168,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);
-            }
-          }}
-          className="flex lg:hidden items-center p-1 h-full ml-4 lg:ml-6">
-          {isDark ? lightIcon : darkIcon}
+          aria-label={
+            colorMode === ColorMode.dark ? 'Use Light Mode' : 'Use Dark Mode'
+          }
+          onClick={toggleColorMode}
+          className="hidden lg:flex items-center h-full pr-2">
+          {colorMode === ColorMode.dark ? lightIcon : darkIcon}
         </button>
       </div>
     </nav>
diff --git a/beta/src/components/Layout/Sidebar/Sidebar.tsx b/beta/src/components/Layout/Sidebar/Sidebar.tsx
index 5a5b6c5f1f3..e6f8e0c0baa 100644
--- a/beta/src/components/Layout/Sidebar/Sidebar.tsx
+++ b/beta/src/components/Layout/Sidebar/Sidebar.tsx
@@ -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'}
diff --git a/beta/src/components/MDX/CodeBlock/CodeBlock.tsx b/beta/src/components/MDX/CodeBlock/CodeBlock.tsx
index 55d5e069901..9364f89f2ee 100644
--- a/beta/src/components/MDX/CodeBlock/CodeBlock.tsx
+++ b/beta/src/components/MDX/CodeBlock/CodeBlock.tsx
@@ -11,9 +11,10 @@ import {
   SandpackThemeProvider,
 } from '@codesandbox/sandpack-react';
 import rangeParser from 'parse-numeric-range';
-
-import {CodeBlockLightTheme} from '../Sandpack/Themes';
+import { GithubLightTheme } from '../Sandpack/Themes';
+import { NightOwlTheme } from '../Sandpack/Themes';
 import styles from './CodeBlock.module.css';
+import { ColorMode, ThemeContext } from 'modules/ThemeProvider';
 
 interface InlineHiglight {
   step: number;
@@ -47,7 +48,7 @@ const CodeBlock = React.forwardRef(
       const linesToHighlight = getHighlightLines(metastring);
       const highlightedLineConfig = linesToHighlight.map((line) => {
         return {
-          className: 'bg-github-highlight',
+          className: 'bg-github-highlight dark:bg-opacity-10',
           line,
         };
       });
@@ -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,11 +78,12 @@ const CodeBlock = React.forwardRef(
     const language = className.substring(9);
     const filename = '/index.' + language;
     const decorators = getDecoratedLineInfo();
+    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-wash dark:bg-gray-95 shadow-lg',
           !noMargin && 'my-8'
         )}>
         <SandpackProvider
@@ -93,7 +95,10 @@ const CodeBlock = React.forwardRef(
               },
             },
           }}>
-          <SandpackThemeProvider theme={CodeBlockLightTheme}>
+          <SandpackThemeProvider
+            theme={
+              colorMode === ColorMode.dark ? NightOwlTheme : GithubLightTheme
+            }>
             <ClasserProvider
               classes={{
                 'sp-cm': styles.codeViewer,
@@ -161,8 +166,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);
diff --git a/beta/src/components/MDX/Sandpack/CustomPreset.tsx b/beta/src/components/MDX/Sandpack/CustomPreset.tsx
index 9772c0a162e..cdef21866d0 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,13 @@ 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 { MenuContext } from 'components/useMenu';
+import { NavigationBar } from './NavigationBar';
+import { Preview } from './Preview';
+import { GithubLightTheme } from './Themes';
+import { NightOwlTheme } from './Themes';
+import { ColorMode, ThemeContext } from 'modules/ThemeProvider';
 
 export function CustomPreset({
   isSingleFile,
@@ -22,12 +25,13 @@ 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 { colorMode } = useContext(ThemeContext);
 
-  const {activePath} = sandpack;
+  const { activePath } = sandpack;
   if (!lineCountRef.current[activePath]) {
     lineCountRef.current[activePath] = code.split('\n').length;
   }
@@ -45,7 +49,10 @@ export function CustomPreset({
     <>
       <div className="shadow-lg dark:shadow-lg-dark rounded-lg">
         <NavigationBar showDownload={isSingleFile} onReset={onReset} />
-        <SandpackThemeProvider theme={GithubLightTheme}>
+        <SandpackThemeProvider
+          theme={
+            colorMode === ColorMode.dark ? NightOwlTheme : GithubLightTheme
+          }>
           <div
             ref={sandpack.lazyAnchorRef}
             className="sp-layout rounded-t-none"
diff --git a/beta/src/components/MDX/Sandpack/Themes.tsx b/beta/src/components/MDX/Sandpack/Themes.tsx
index 599fbea1fde..3aebce958ef 100644
--- a/beta/src/components/MDX/Sandpack/Themes.tsx
+++ b/beta/src/components/MDX/Sandpack/Themes.tsx
@@ -2,14 +2,50 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {githubLightTheme, SandpackTheme} from '@codesandbox/sandpack-react';
+import {
+  codesandboxDarkTheme,
+  codesandboxLightTheme,
+  SandpackTheme,
+} from '@codesandbox/sandpack-react';
 import tailwindConfig from '../../../../tailwind.config';
 
 export const GithubLightTheme: SandpackTheme = {
-  ...githubLightTheme,
+  ...codesandboxLightTheme,
+  palette: {
+    activeText: '#24292e',
+    defaultText: '#959da5',
+    inactiveText: '#e4e7eb',
+    activeBackground: '#e4e7eb',
+    defaultBackground: '#ffffff',
+    inputBackground: '#ffffff',
+    accent: '#c8c8fa',
+    errorBackground: '#ffcdca',
+    errorForeground: '#811e18',
+  },
+  typography: {
+    ...codesandboxLightTheme.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 NightOwlTheme: SandpackTheme = {
+  ...codesandboxDarkTheme,
+  palette: {
+    activeText: '#FFFFFF',
+    defaultText: '#999999',
+    inactiveText: '#343434',
+    activeBackground: '#343434',
+    defaultBackground: '#16181D',
+    inputBackground: '#242424',
+    accent: '#6caedd',
+    errorBackground: '#ffcdca',
+    errorForeground: '#811e18',
+  },
   typography: {
-    ...githubLightTheme.typography,
+    ...codesandboxDarkTheme.typography,
     bodyFont: tailwindConfig.theme.extend.fontFamily.sans.join(', '),
     monoFont: tailwindConfig.theme.extend.fontFamily.mono.join(', '),
     fontSize: tailwindConfig.theme.extend.fontSize.code,
@@ -18,13 +54,13 @@ export const GithubLightTheme: SandpackTheme = {
 };
 
 export const CodeBlockLightTheme: SandpackTheme = {
-  ...githubLightTheme,
+  ...codesandboxLightTheme,
   palette: {
-    ...githubLightTheme.palette,
+    ...codesandboxLightTheme.palette,
     defaultBackground: 'transparent',
   },
   typography: {
-    ...githubLightTheme.typography,
+    ...codesandboxLightTheme.typography,
     bodyFont: tailwindConfig.theme.extend.fontFamily.sans.join(', '),
     monoFont: tailwindConfig.theme.extend.fontFamily.mono.join(', '),
     fontSize: tailwindConfig.theme.extend.fontSize.code,
diff --git a/beta/src/components/Search.tsx b/beta/src/components/Search.tsx
index a531a06190a..cb339ddddea 100644
--- a/beta/src/components/Search.tsx
+++ b/beta/src/components/Search.tsx
@@ -31,7 +31,7 @@ function Hit({hit, children}: any) {
 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"
+      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}
     />
diff --git a/beta/src/components/useMenu.tsx b/beta/src/components/useMenu.tsx
index 395b574c037..eb979118f7a 100644
--- a/beta/src/components/useMenu.tsx
+++ b/beta/src/components/useMenu.tsx
@@ -19,6 +19,9 @@ type SidebarNav = 'root' | 'docs' | 'reference';
  */
 export const useMenu = () => {
   const [isOpen, setIsOpen] = React.useState(false);
+  // TODO: persist
+  // TODO: respect system pref
+  const [isDark, setIsDark] = React.useState(false);
   const menuRef = React.useRef<HTMLDivElement>(null);
   const router = useRouter();
 
@@ -57,6 +60,8 @@ export const useMenu = () => {
     toggleOpen,
     menuRef,
     isOpen,
+    isDark,
+    setIsDark,
   };
 };
 
diff --git a/beta/src/modules/ThemeProvider.tsx b/beta/src/modules/ThemeProvider.tsx
new file mode 100644
index 00000000000..adeaa73fd03
--- /dev/null
+++ b/beta/src/modules/ThemeProvider.tsx
@@ -0,0 +1,53 @@
+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>
+  );
+};
diff --git a/beta/src/pages/_app.tsx b/beta/src/pages/_app.tsx
index 01c3ca7dc38..c818aa909c2 100644
--- a/beta/src/pages/_app.tsx
+++ b/beta/src/pages/_app.tsx
@@ -11,6 +11,7 @@ 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';
 if (typeof window !== 'undefined') {
   hotjar(process.env.NEXT_PUBLIC_HJ_SITE_ID, process.env.NEXT_PUBLIC_HJ_SITE_V);
 }
@@ -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..d3e2c74b48d 100644
--- a/beta/src/pages/_document.tsx
+++ b/beta/src/pages/_document.tsx
@@ -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-wash dark:bg-wash-dark text-secondary dark:text-secondary-dark leading-base transition-colors duration-500">
           <Main />
           <NextScript />
         </body>
diff --git a/beta/src/styles/sandpack.css b/beta/src/styles/sandpack.css
index 589d79f02e2..b7125742377 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,23 +60,17 @@ 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;
 }
-
-.cm-activeLine {
-  background: rgba(245, 247, 250, var(--tw-bg-opacity)) !important;
-}
-.sp-code-editor {
-  background: white !important;
-}
 .sp-stack {
   height: initial !important;
   width: fit-content !important;
 }
 .sp-cm {
   -webkit-text-size-adjust: none !important;
+  padding: 0 !important;
 }
 .cm-wrap,
 .cm-wrap .cm-gutters {
@@ -96,21 +90,22 @@ html.dark .sp-tabs .sp-tab-button[data-active='true'] {
 }
 .sp-cm.sp-pristine .cm-scroller {
   overflow: auto !important;
+  padding: 18px 0 !important;
 }
 .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) {