workflow: add light theme for sfc playground (#8667)

Author: baiwusanyu-c

packages/sfc-playground/index.html

@@ -8,14 +8,14 @@
     <title>Vue SFC Playground</title>
     <script>
       // process shim for old versions of @vue/compiler-sfc dependency
-      // window.process = { env: {} }
-      // const savedPreferDark = localStorage.getItem('vue-sfc-playground-prefer-dark')
-      // if (
-      //   savedPreferDark === 'true' ||
-      //   (!savedPreferDark && window.matchMedia('(prefers-color-scheme: dark)').matches)
-      // ) {
+       window.process = { env: {} }
+       const savedPreferDark = localStorage.getItem('vue-sfc-playground-prefer-dark')
+       if (
+         savedPreferDark === 'true' ||
+         (!savedPreferDark && window.matchMedia('(prefers-color-scheme: dark)').matches)
+       ) {
         document.documentElement.classList.add('dark')
-      // }
+       }
     </script>
     <script type="module" src="/src/main.ts"></script>
   </head>

packages/sfc-playground/package.json

@@ -12,7 +12,7 @@
     "vite": "^4.3.9"
   },
   "dependencies": {
-    "@vue/repl": "^2.3.0",
+    "@vue/repl": "^2.4.0",
     "file-saver": "^2.0.5",
     "jszip": "^3.6.0",
     "vue": "workspace:*"

packages/sfc-playground/src/App.vue

@@ -2,7 +2,7 @@
 import Header from './Header.vue'
 import { Repl, ReplStore, SFCOptions } from '@vue/repl'
 import Monaco from '@vue/repl/monaco-editor'
-import { ref, watchEffect } from 'vue'
+import { ref, watchEffect, onMounted } from 'vue'
 
 const setVH = () => {
   document.documentElement.style.setProperty('--vh', window.innerHeight + `px`)
@@ -72,17 +72,28 @@ function toggleSSR() {
   useSSRMode.value = !useSSRMode.value
   store.setFiles(store.getFiles())
 }
+
+const theme = ref('dark')
+function toggleTheme(isDark: boolean) {
+  theme.value = isDark ? 'dark' : 'light'
+}
+onMounted(() => {
+  const cls = document.documentElement.classList
+  toggleTheme(cls.contains('dark'))
+})
 </script>
 
 <template>
   <Header
     :store="store"
     :dev="useDevMode"
     :ssr="useSSRMode"
+    @toggle-theme="toggleTheme"
     @toggle-dev="toggleDevMode"
     @toggle-ssr="toggleSSR"
   />
   <Repl
+    :theme="theme"
     :editor="Monaco"
     @keydown.ctrl.s.prevent
     @keydown.meta.s.prevent

packages/sfc-playground/src/Header.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { downloadProject } from './download/download'
 import { ref, onMounted } from 'vue'
-// import Sun from './icons/Sun.vue'
-// import Moon from './icons/Moon.vue'
+import Sun from './icons/Sun.vue'
+import Moon from './icons/Moon.vue'
 import Share from './icons/Share.vue'
 import Download from './icons/Download.vue'
 import GitHub from './icons/GitHub.vue'
@@ -51,14 +51,16 @@ async function copyLink(e: MouseEvent) {
   alert('Sharable URL has been copied to clipboard.')
 }
 
-// function toggleDark() {
-//   const cls = document.documentElement.classList
-//   cls.toggle('dark')
-//   localStorage.setItem(
-//     'vue-sfc-playground-prefer-dark',
-//     String(cls.contains('dark'))
-//   )
-// }
+const emit = defineEmits(['toggle-theme', 'toggle-ssr','toggle-dev'])
+ function toggleDark() {
+  const cls = document.documentElement.classList
+   cls.toggle('dark')
+   localStorage.setItem(
+     'vue-sfc-playground-prefer-dark',
+     String(cls.contains('dark'))
+  )
+   emit('toggle-theme', cls.contains('dark'))
+ }
 
 onMounted(async () => {
   window.addEventListener('click', () => {
@@ -145,10 +147,10 @@ async function fetchVersions(): Promise<string[]> {
       >
         <span>{{ ssr ? 'SSR ON' : 'SSR OFF' }}</span>
       </button>
-      <!-- <button title="Toggle dark mode" class="toggle-dark" @click="toggleDark">
+       <button title="Toggle dark mode" class="toggle-dark" @click="toggleDark">
         <Sun class="light" />
         <Moon class="dark" />
-      </button> -->
+      </button>
       <button title="Copy sharable URL" class="share" @click="copyLink">
         <Share />
       </button>