From c2751209e272a70298745465285bbf5b69f5eab1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ahn=20Hyunmo=5B=20=EC=95=88=ED=98=84=EB=AA=A8=20=5D?=
 <hyunmo.ahn@linecorp.com>
Date: Sat, 2 Nov 2024 01:00:47 +0900
Subject: [PATCH] feat: set theme on code preview

---
 .../playground/PlaygroundOutput/index.tsx     |  6 +----
 src/components/playground/index.tsx           | 24 ++++++++++++++++---
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/components/playground/PlaygroundOutput/index.tsx b/src/components/playground/PlaygroundOutput/index.tsx
index cb2993e..99e3d59 100644
--- a/src/components/playground/PlaygroundOutput/index.tsx
+++ b/src/components/playground/PlaygroundOutput/index.tsx
@@ -78,11 +78,7 @@ export const PlaygroundOutput = ({
         </Button>
       </TabListWrapper>
       <TabContent value="result" forceMount height={outputHeight}>
-        <SandpackPreview
-          style={{ height: '100%' }}
-          showOpenInCodeSandbox={false}
-          showRefreshButton={false}
-        />
+        <SandpackPreview style={{ height: '100%' }} showRefreshButton={false} />
       </TabContent>
       <TabContent value="console" forceMount height={outputHeight}>
         <SandpackConsole style={{ height: '100%' }} standalone resetOnPreviewRestart />
diff --git a/src/components/playground/index.tsx b/src/components/playground/index.tsx
index 64ac8f9..d039e42 100644
--- a/src/components/playground/index.tsx
+++ b/src/components/playground/index.tsx
@@ -26,18 +26,36 @@ export interface PlaygroundProps {
   outputHeight?: number;
 }
 
-const strictOff = {
+const strictOff = (theme: 'dark' | 'light') => ({
   '/index.js': {
     hidden: true,
     code: `import React from "react";
 import { createRoot } from "react-dom/client";
 import "./styles.css";
+import "./theme.css";
 import App from "./App";
 const root = createRoot(document.getElementById("root"));
 root.render(<App />);
 `,
   },
-};
+  '/theme.css': {
+    hidden: true,
+    code:
+      theme === 'dark'
+        ? `
+    html {
+      color: #e3e3e3;
+      background-color: #1c1e21;
+    }
+    `
+        : `
+    html {
+      color: #1c1e21;
+      background-color: transparent;
+    }
+    `,
+  },
+});
 
 export const Playground = ({
   files,
@@ -51,7 +69,7 @@ export const Playground = ({
 
   return (
     <SandpackProvider
-      files={{ ...files, ...(!strict && strictOff) }}
+      files={{ ...files, ...(!strict && strictOff(colorMode)) }}
       theme={colorMode}
       template="react"
       options={{ autorun: true, autoReload: true }}