From b4e1dfe3f8a58ce06117d4f95416d198c5d095b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9C=A8=E6=9D=89?= <zhmushan@qq.com>
Date: Mon, 13 Jun 2022 10:58:27 +0800
Subject: [PATCH] chore(sfc-playground): hide versions when click iframe & set
 color-scheme to dark (#6003)

---
 packages/sfc-playground/src/App.vue    | 4 ++++
 packages/sfc-playground/src/Header.vue | 5 +++++
 2 files changed, 9 insertions(+)

diff --git a/packages/sfc-playground/src/App.vue b/packages/sfc-playground/src/App.vue
index 2e123531b40..33ed68c1043 100644
--- a/packages/sfc-playground/src/App.vue
+++ b/packages/sfc-playground/src/App.vue
@@ -82,6 +82,10 @@ function toggleSSR() {
 </template>
 
 <style>
+.dark {
+  color-scheme: dark;
+}
+
 body {
   font-size: 13px;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
diff --git a/packages/sfc-playground/src/Header.vue b/packages/sfc-playground/src/Header.vue
index f2daaf02bda..15f22ca66ff 100644
--- a/packages/sfc-playground/src/Header.vue
+++ b/packages/sfc-playground/src/Header.vue
@@ -54,6 +54,11 @@ onMounted(async () => {
   window.addEventListener('click', () => {
     expanded.value = false
   })
+  window.addEventListener('blur', () => {
+    if (document.activeElement?.tagName === 'IFRAME') {
+      expanded.value = false
+    }
+  });
 })
 
 async function fetchVersions(): Promise<string[]> {