feat: apply theme to preview (vuejs#200)

btea · web-flow · commit 7ae106129274 · 2024-01-03T16:58:30.000+08:00
diff --git a/src/output/Preview.vue b/src/output/Preview.vue
@@ -20,6 +20,7 @@ const props = defineProps<{ show: boolean; ssr: boolean }>()
 
 const store = inject('store') as Store
 const clearConsole = inject('clear-console') as Ref<boolean>
+const theme = inject('theme') as Ref<'dark' | 'light'>
 
 const previewOptions = inject('preview-options') as Props['previewOptions']
 
@@ -85,6 +86,7 @@ function createSandbox() {
     importMap.imports.vue = store.state.vueRuntimeURL
   }
   const sandboxSrc = srcdoc
+    .replace(/<html>/, `<html class="${theme.value}">`)
     .replace(/<!--IMPORT_MAP-->/, JSON.stringify(importMap))
     .replace(
       /<!-- PREVIEW-OPTIONS-HEAD-HTML -->/,
@@ -277,7 +279,12 @@ defineExpose({ reload })
 </script>
 
 <template>
-  <div class="iframe-container" v-show="show" ref="container"></div>
+  <div
+    class="iframe-container"
+    :class="theme"
+    v-show="show"
+    ref="container"
+  ></div>
   <Message :err="runtimeError" />
   <Message v-if="!runtimeError" :warn="runtimeWarning" />
 </template>
@@ -290,4 +297,7 @@ defineExpose({ reload })
   border: none;
   background-color: #fff;
 }
+.iframe-container.dark :deep(iframe) {
+  background-color: #1e1e1e;
+}
 </style>
