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

diff --git a/packages/sfc-playground/index.html b/packages/sfc-playground/index.html
index 26431e134476a587f63c1ac141ed755049c56de5..29e8d6e9729ff041ac836871a37bac78fa0fa8c4 100644 (file)
--- a/packages/sfc-playground/index.html
+++ b/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>

diff --git a/packages/sfc-playground/package.json b/packages/sfc-playground/package.json
index b6bfb9b795d539f4dbab4f5b480d2515f591fb5c..76e6a014e7d4df1917a2b2646ccd850c8c02022e 100644 (file)
--- a/packages/sfc-playground/package.json
+++ b/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:*"

diff --git a/packages/sfc-playground/src/App.vue b/packages/sfc-playground/src/App.vue
index 3c850fec4e43f68fdc29b7e7bcaefcff2bd33072..f9b77f47ea24dfb4b7abc0d3d851f32841b17dca 100644 (file)
--- a/packages/sfc-playground/src/App.vue
+++ b/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,6 +72,15 @@ 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>
@@ -79,10 +88,12 @@ function toggleSSR() {
     :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

diff --git a/packages/sfc-playground/src/Header.vue b/packages/sfc-playground/src/Header.vue
index bbcbe3f2a6ca6d9c4995604eea82402e57365b96..e6e4521bdb7f287e7f7d3af78ad44f6ab4510ca3 100644 (file)
--- a/packages/sfc-playground/src/Header.vue
+++ b/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>

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 48566b54eb463179471440bc1b227df9153efe06..d6c6b95d94e9cda05aecd454fe92bd8665310195 100644 (file)
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -333,8 +333,8 @@ importers:
   packages/sfc-playground:
     dependencies:
       '@vue/repl':
-        specifier: ^2.3.0
-        version: 2.3.0
+        specifier: ^2.4.0
+        version: 2.4.0
       file-saver:
         specifier: ^2.0.5
         version: 2.0.5
@@ -1513,8 +1513,8 @@ packages:
     engines: {node: '>= 0.12.0'}
     dev: true
 
-  /@vue/repl@2.3.0:
-    resolution: {integrity: sha512-b5unP309uGABwgvfahFEGoDe7AzuvEioO7/AwuebywwA0oKSzOW1bR2sJq4fj0wHCL6/bthremJkrtNTCKFJbA==}
+  /@vue/repl@2.4.0:
+    resolution: {integrity: sha512-vXXEysYTCZdJo3kECwKDTxd6GI3F9RzJ3dkslY6fpdGn7q+aCizLqcWiEnWaeBjbqOh31rMsPPUxhhC3jhaiXQ==}
     dev: false
 
   /@zeit/schemas@2.6.0: