diff --git a/packages/sfc-playground/index.html b/packages/sfc-playground/index.html
index f58afbc92..f8373877d 100644
--- a/packages/sfc-playground/index.html
+++ b/packages/sfc-playground/index.html
@@ -1,20 +1,28 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="icon" type="image/svg" href="/logo.svg">
-  <title>Vue SFC Playground</title>
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/svg" href="/logo.svg" />
+    <title>Vue SFC Playground</title>
 
-  <link rel="preconnect" href="https://fonts.gstatic.com">
-  <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap"
+      rel="stylesheet"
+    />
 
-  <!-- process shim for @vue/compiler-sfc dependency -->
-  <script>window.process = { env: {} }</script>
-  <script type="module" src="/src/main.ts"></script>
-</head>
-<body>
-  <div id="app"></div>
-</body>
-</html>
\ No newline at end of file
+    <script>
+      // process shim for old versions of @vue/compiler-sfc dependency
+      window.process = { env: {} }
+      if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        document.documentElement.classList.add('dark')
+      }
+    </script>
+    <script type="module" src="/src/main.ts"></script>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
diff --git a/packages/sfc-playground/package.json b/packages/sfc-playground/package.json
index d866cef99..07affb3d7 100644
--- a/packages/sfc-playground/package.json
+++ b/packages/sfc-playground/package.json
@@ -8,11 +8,11 @@
     "serve": "vite preview"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^1.2.0",
-    "vite": "^2.4.0"
+    "@vitejs/plugin-vue": "^1.6.0",
+    "vite": "^2.5.0"
   },
   "dependencies": {
-    "@vue/repl": "^0.1.0",
+    "@vue/repl": "^0.2.0",
     "file-saver": "^2.0.5",
     "jszip": "^3.6.0"
   }
diff --git a/packages/sfc-playground/src/Header.vue b/packages/sfc-playground/src/Header.vue
index 4f8adc214..912f34375 100644
--- a/packages/sfc-playground/src/Header.vue
+++ b/packages/sfc-playground/src/Header.vue
@@ -102,7 +102,7 @@ async function fetchVersions(): Promise<string[]> {
         <svg width="1.4em" height="1.4em" viewBox="0 0 24 24">
           <g
             fill="none"
-            stroke="#626262"
+            stroke="#666"
             stroke-width="2"
             stroke-linecap="round"
             stroke-linejoin="round"
@@ -117,7 +117,7 @@ async function fetchVersions(): Promise<string[]> {
       </button>
       <button class="download" @click="downloadProject(store)">
         <svg width="1.7em" height="1.7em" viewBox="0 0 24 24">
-          <g fill="#626262">
+          <g fill="#666">
             <rect x="4" y="18" width="16" height="2" rx="1" ry="1" />
             <rect
               x="3"
@@ -150,10 +150,15 @@ async function fetchVersions(): Promise<string[]> {
 
 <style>
 nav {
+  --bg: #fff;
+  --bg-light: #fff;
+  --border: #ddd;
+
+  color: var(--base);
   height: var(--nav-height);
   box-sizing: border-box;
   padding: 0 1em;
-  background-color: #fff;
+  background-color: var(--bg);
   box-shadow: 0 0 4px rgba(0, 0, 0, 0.33);
   position: relative;
   z-index: 999;
@@ -161,6 +166,16 @@ nav {
   justify-content: space-between;
 }
 
+.dark nav {
+  --base: #ddd;
+  --bg: #1a1a1a;
+  --bg-light: #242424;
+  --border: #383838;
+
+  box-shadow: none;
+  border-bottom: 1px solid var(--border);
+}
+
 h1 {
   margin: 0;
   line-height: var(--nav-height);
@@ -218,13 +233,17 @@ h1 img {
   border-top-color: var(--base);
 }
 
+.dark .version:hover .active-version:after {
+  border-top-color: #fff;
+}
+
 .versions {
   display: none;
   position: absolute;
   left: 0;
   top: 40px;
-  background-color: white;
-  border: 1px solid #ddd;
+  background-color: var(--bg-light);
+  border: 1px solid var(--border);
   border-radius: 4px;
   list-style-type: none;
   padding: 8px;
diff --git a/packages/sfc-playground/src/main.ts b/packages/sfc-playground/src/main.ts
index a82d62b9c..1ef69e7d2 100644
--- a/packages/sfc-playground/src/main.ts
+++ b/packages/sfc-playground/src/main.ts
@@ -1,6 +1,5 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import '@vue/repl/style.css'
-;(window as any).process = { env: {} }
 
 createApp(App).mount('#app')
diff --git a/yarn.lock b/yarn.lock
index 3f237c150..77b3af2ac 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -923,15 +923,15 @@
     "@typescript-eslint/types" "4.30.0"
     eslint-visitor-keys "^2.0.0"
 
-"@vitejs/plugin-vue@^1.2.0":
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-1.6.0.tgz#e5558e20c20e9098cd5bd65b9901fdcd2c354983"
-  integrity sha512-n3i8htn8pTg9M+kM3cnEfsPZx/6ngInlTroth6fA1LQTJq5aTVQ8ggaE5pPoAy9vCgHPtcaXMzwpldhqRAkebQ==
+"@vitejs/plugin-vue@^1.6.0":
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-1.6.1.tgz#a40a06661af61fdc1bebdfb811b28f50ad39dfb3"
+  integrity sha512-tX2Ju8fOyEtfstfmwjfSJcstTFXwzdFAUbYJ5bWWifvKIgbe6B0FbM8l3Wb7wOaaxKn4FYkii7WQnAPcsTqaIA==
 
-"@vue/repl@^0.1.0":
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/@vue/repl/-/repl-0.1.0.tgz#9d37f0e8458b18737286785ea86456b8a60e3ee8"
-  integrity sha512-C1o7ZRJFDKjF7Hz94DVCg9XQL1gRG7+Iigu9HduNmS80LvBb6SJ6JiwOpPSV0UU/gDCt1r+Am9bUGEVj2D/fzw==
+"@vue/repl@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@vue/repl/-/repl-0.2.0.tgz#497a2377c1dda1fb032052e15d3ccc8f1a85c1bf"
+  integrity sha512-L8Fju0AdmFlcIK2JTprmeXU+SEppPd8TZtS+Le/PYlU6b8i3+PZ7Dt/ce/PI0MLR1BPPtRA0voPpM0wccYqHdQ==
 
 "@zeit/schemas@2.6.0":
   version "2.6.0"
@@ -6342,7 +6342,7 @@ vary@~1.1.2:
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
   integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
 
-vite@^2.4.0:
+vite@^2.5.0:
   version "2.5.3"
   resolved "https://registry.yarnpkg.com/vite/-/vite-2.5.3.tgz#88d40a9efb9bec66bd87a7676c5689f35ff63742"
   integrity sha512-1wMDnjflvtTTkMov8O/Xb5+w1/VW/Gw8oCf8f6dqgHn8lMOEqq0SaPtFEQeikFcOKCfSbiU0nEi0LDIx6DNsaQ==
