From 4950ed035859514fc4279156222b97d9d7dc16c4 Mon Sep 17 00:00:00 2001
From: Abraham <anubra266@gmail.com>
Date: Wed, 16 Oct 2024 05:05:38 -0500
Subject: [PATCH] chore: fix frame demo (#3001)

---
 website/src/demos/frame.demo.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/website/src/demos/frame.demo.tsx b/website/src/demos/frame.demo.tsx
index b0047a7563..45658dcbd3 100644
--- a/website/src/demos/frame.demo.tsx
+++ b/website/src/demos/frame.demo.tsx
@@ -5,7 +5,9 @@ import { css } from 'styled-system/css'
 
 export const Demo = () => {
   const { resolvedTheme } = useTheme()
+
   const color = resolvedTheme === 'dark' ? '#FFF' : '#000'
+  const bg = resolvedTheme === 'dark' ? '#111110' : '#FFF'
   return (
     <Frame
       className={css({
@@ -14,7 +16,9 @@ export const Demo = () => {
         borderWidth: '1px',
         height: 'calc(var(--height) + 2px)',
       })}
-      head={<style>{'.frame-root {font-family:sans-serif; padding: 24px}'}</style>}
+      head={
+        <style>{`.frame-root {font-family:sans-serif; padding: 24px} body{background: ${bg} }`}</style>
+      }
     >
       <h1 style={{ color }}>Ark UI / Frame</h1>
       <p style={{ marginBottom: '10px', marginTop: '4px', color }}>