Improvement to dark-tweaks, presist dark mode, add transitions, etc

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',

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')}>

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>

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'}

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);

beta/src/components/MDX/Sandpack/CustomPreset.tsx

@@ -2,18 +2,21 @@
  * 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 { 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"

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,

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}
     />

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,
   };
 };