feat: add previewTheme prop

Whether to follow the theme in sandbox
vuejs · Feb 11, 2024 · c830fc4 · c830fc4
1 parent 1786cbf
commit c830fc4
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 14 deletions.
diff --git a/src/Repl.vue b/src/Repl.vue
@@ -8,6 +8,7 @@ import EditorContainer from './editor/EditorContainer.vue'
 
 export interface Props {
   theme?: 'dark' | 'light'
+  previewTheme?: boolean
   editor: EditorComponentType
   store?: Store
   autoResize?: boolean
@@ -31,6 +32,7 @@ export interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   theme: 'light',
+  previewTheme: false,
   store: () => useStore(),
   autoResize: true,
   showCompileOutput: true,
@@ -69,6 +71,7 @@ provide('tsconfig', toRef(props, 'showTsConfig'))
 provide('clear-console', toRef(props, 'clearConsole'))
 provide('preview-options', props.previewOptions)
 provide('theme', toRef(props, 'theme'))
+provide('preview-theme', toRef(props, 'previewTheme'))
 /**
  * Reload the preview iframe
  */

diff --git a/src/output/Preview.vue b/src/output/Preview.vue
@@ -21,6 +21,7 @@ const props = defineProps<{ show: boolean; ssr: boolean }>()
 const store = inject(injectKeyStore)!
 const clearConsole = inject<Ref<boolean>>('clear-console')!
 const theme = inject<Ref<'dark' | 'light'>>('theme')!
+const previewTheme = inject<Ref<boolean>>('preview-theme')!
 
 const previewOptions = inject<Props['previewOptions']>('preview-options')
 
@@ -49,15 +50,16 @@ watch(
 )
 
 // reset theme
-watch(
-  () => theme.value,
-  (value) => {
-    const html = sandbox.contentDocument?.documentElement
-    if (html) {
-      html.className = value
-    }
-  },
-)
+watch([theme, previewTheme], ([theme, previewTheme]) => {
+  if (!previewTheme) return
+
+  const html = sandbox.contentDocument?.documentElement
+  if (html) {
+    html.className = theme
+  } else {
+    createSandbox()
+  }
+})
 
 onUnmounted(() => {
   proxy.destroy()
@@ -88,7 +90,10 @@ function createSandbox() {
 
   const importMap = store.getImportMap()
   const sandboxSrc = srcdoc
-    .replace(/<html>/, `<html class="${theme.value}">`)
+    .replace(
+      /<html>/,
+      `<html class="${previewTheme.value ? theme.value : ''}">`,
+    )
     .replace(/<!--IMPORT_MAP-->/, JSON.stringify(importMap))
     .replace(
       /<!-- PREVIEW-OPTIONS-HEAD-HTML -->/,
@@ -281,7 +286,12 @@ defineExpose({ reload })
 </script>
 
 <template>
-  <div v-show="show" ref="container" class="iframe-container" :class="theme" />
+  <div
+    v-show="show"
+    ref="container"
+    class="iframe-container"
+    :class="{ [theme]: previewTheme }"
+  />
   <Message :err="runtimeError" />
   <Message v-if="!runtimeError" :warn="runtimeWarning" />
 </template>

diff --git a/src/output/srcdoc.html b/src/output/srcdoc.html
@@ -3,8 +3,7 @@
   <head>
     <style>
       html.dark {
-        color: white;
-        background: #1e1e1e;
+        color-scheme: dark;
       }
       body {
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,

diff --git a/test/main.ts b/test/main.ts
@@ -47,11 +47,16 @@ const App = {
     // }, 1000)
 
     // store.vueVersion = '3.4.1'
+    const theme = ref<'light' | 'dark'>('dark')
+    window.theme = theme
+    const previewTheme = ref(false)
+    window.previewTheme = previewTheme
 
     return () =>
       h(Repl, {
         store,
-        theme: 'dark',
+        theme: theme.value,
+        previewTheme: previewTheme.value,
         editor: MonacoEditor,
         // layout: 'vertical',
         ssr: true,