make other components dark mode compatible

Author: amitojsingh366

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>

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

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

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>
     </>
   );
-}
+}

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

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