Fixed system theme for hero demo (#621)

Author: matthewlipski

docs/components/pages/landing/hero/Demo.tsx

@@ -29,12 +29,12 @@ const DemoEditor = dynamic(
   },
 );
 
-export function Demo(props: { theme: "light" | "dark" }) {
+export function Demo(props: { theme?: "light" | "dark" }) {
   return (
     <div className="hero relative h-[36rem] w-full shrink-0 grow-0 rounded-lg xl:w-[584px]">
       <div className="editor-glow absolute z-10 h-full w-full" />
       <div className="relative z-20 h-full w-full rounded-lg bg-white dark:bg-[#202020]">
-        <DemoEditor theme={props.theme === "dark" ? "dark" : "light"} />
+        <DemoEditor theme={props.theme} />
       </div>
       <TryHereImage />
     </div>

docs/components/pages/landing/hero/DemoEditor.tsx

@@ -54,9 +54,8 @@ function getUTCDateYYYYMMDD() {
   return `${year}${formattedMonth}${formattedDay}`;
 }
 
-export default function DemoEditor(props: { theme: "light" | "dark" }) {
+export default function DemoEditor(props: { theme?: "light" | "dark" }) {
   const [doc, provider] = useMemo(() => {
-    console.log("create");
     const doc = new Y.Doc();
     const provider = new YPartyKitProvider(
       "blocknote.yousefed.partykit.dev",

docs/components/pages/landing/hero/Hero.tsx

@@ -15,7 +15,13 @@ export function Hero() {
           "z-20 flex w-full flex-col items-center justify-between gap-6 px-6 md:max-w-screen-md xl:max-w-[1440px] xl:flex-row"
         }>
         <Text />
-        <Demo theme={theme === "dark" ? "dark" : "light"} />
+        <Demo
+          theme={
+            theme === undefined || theme === "system"
+              ? undefined
+              : (theme as "light" | "dark" | undefined)
+          }
+        />
       </FadeIn>
     </Section>
   );