chore(sfc-playground): add dark mode toggle

packages/sfc-playground/index.html

@@ -9,7 +9,11 @@
     <script>
       // process shim for old versions of @vue/compiler-sfc dependency
       window.process = { env: {} }
-      if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      const saved = localStorage.getItem('vue-sfc-playground-prefer-dark')
+      if (
+        saved !== 'false' ||
+        window.matchMedia('(prefers-color-scheme: dark)').matches
+      ) {
         document.documentElement.classList.add('dark')
       }
     </script>

packages/sfc-playground/src/Header.vue

@@ -1,6 +1,10 @@
 <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 Share from './icons/Share.vue'
+import Download from './icons/Download.vue'
 
 // @ts-ignore
 const { store } = defineProps(['store'])
@@ -35,6 +39,15 @@ async function copyLink() {
   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'))
+  )
+}
+
 onMounted(async () => {
   window.addEventListener('click', () => {
     expanded.value = false
@@ -98,51 +111,13 @@ async function fetchVersions(): Promise<string[]> {
           </li>
         </ul>
       </div>
-      <button class="share" @click="copyLink">
+      <button class="toggle-dark" @click="toggleDark">
-        <svg width="1.4em" height="1.4em" viewBox="0 0 24 24">
+        <Sun class="light" />
-          <g
+        <Moon class="dark" />
-            fill="none"
-            stroke="#666"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <circle cx="18" cy="5" r="3" />
-            <circle cx="6" cy="12" r="3" />
-            <circle cx="18" cy="19" r="3" />
-            <path d="M8.59 13.51l6.83 3.98" />
-            <path d="M15.41 6.51l-6.82 3.98" />
-          </g>
-        </svg>
       </button>
+      <button class="share" @click="copyLink"><Share /></button>
       <button class="download" @click="downloadProject(store)">
-        <svg width="1.7em" height="1.7em" viewBox="0 0 24 24">
+        <Download />
-          <g fill="#666">
-            <rect x="4" y="18" width="16" height="2" rx="1" ry="1" />
-            <rect
-              x="3"
-              y="17"
-              width="4"
-              height="2"
-              rx="1"
-              ry="1"
-              transform="rotate(-90 5 18)"
-            />
-            <rect
-              x="17"
-              y="17"
-              width="4"
-              height="2"
-              rx="1"
-              ry="1"
-              transform="rotate(-90 19 18)"
-            />
-            <path
-              d="M12 15a1 1 0 0 1-.58-.18l-4-2.82a1 1 0 0 1-.24-1.39a1 1 0 0 1 1.4-.24L12 12.76l3.4-2.56a1 1 0 0 1 1.2 1.6l-4 3a1 1 0 0 1-.6.2z"
-            />
-            <path d="M12 13a1 1 0 0 1-1-1V4a1 1 0 0 1 2 0v8a1 1 0 0 1-1 1z" />
-          </g>
-        </svg>
       </button>
     </div>
   </nav>
@@ -192,6 +167,12 @@ h1 img {
   top: -2px;
 }
 
+@media (max-width: 560px) {
+  h1 span {
+    font-size: 0.9em;
+  }
+}
+
 @media (max-width: 480px) {
   h1 span {
     display: none;
@@ -229,6 +210,21 @@ h1 img {
   top: 22px;
 }
 
+.toggle-dark svg {
+  width: 18px;
+  height: 18px;
+  fill: #666;
+}
+
+.toggle-dark .dark,
+.dark .toggle-dark .light {
+  display: none;
+}
+
+.dark .toggle-dark .dark {
+  display: inline-block;
+}
+
 .version:hover .active-version:after {
   border-top-color: var(--base);
 }

packages/sfc-playground/src/icons/Download.vue

@@ -0,0 +1,29 @@
+<template>
+  <svg width="1.7em" height="1.7em" viewBox="0 0 24 24">
+    <g fill="#666">
+      <rect x="4" y="18" width="16" height="2" rx="1" ry="1" />
+      <rect
+        x="3"
+        y="17"
+        width="4"
+        height="2"
+        rx="1"
+        ry="1"
+        transform="rotate(-90 5 18)"
+      />
+      <rect
+        x="17"
+        y="17"
+        width="4"
+        height="2"
+        rx="1"
+        ry="1"
+        transform="rotate(-90 19 18)"
+      />
+      <path
+        d="M12 15a1 1 0 0 1-.58-.18l-4-2.82a1 1 0 0 1-.24-1.39a1 1 0 0 1 1.4-.24L12 12.76l3.4-2.56a1 1 0 0 1 1.2 1.6l-4 3a1 1 0 0 1-.6.2z"
+      />
+      <path d="M12 13a1 1 0 0 1-1-1V4a1 1 0 0 1 2 0v8a1 1 0 0 1-1 1z" />
+    </g>
+  </svg>
+</template>

packages/sfc-playground/src/icons/Moon.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z" />
+  </svg>
+</template>

packages/sfc-playground/src/icons/Share.vue

@@ -0,0 +1,17 @@
+<template>
+  <svg width="1.4em" height="1.4em" viewBox="0 0 24 24">
+    <g
+      fill="none"
+      stroke="#666"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <circle cx="18" cy="5" r="3" />
+      <circle cx="6" cy="12" r="3" />
+      <circle cx="18" cy="19" r="3" />
+      <path d="M8.59 13.51l6.83 3.98" />
+      <path d="M15.41 6.51l-6.82 3.98" />
+    </g>
+  </svg>
+</template>

packages/sfc-playground/src/icons/Sun.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z" />
+    <path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z" />
+    <path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z" />
+    <path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z" />
+    <path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z" />
+    <path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z" />
+    <path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z" />
+    <path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z" />
+    <path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z" />
+  </svg>
+</template>