feat: set theme on code preview

HyunmoAhn · Nov 1, 2024 · c275120 · c275120
1 parent 1bd735c
commit c275120
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 8 deletions.
diff --git 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
@@ -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 }}