diff --git a/playground/src/App.vue b/playground/src/App.vue
index 070e727a6..c301688e3 100644
--- a/playground/src/App.vue
+++ b/playground/src/App.vue
@@ -65,8 +65,6 @@ const log = (arg: any) => {
 }
 
 html {
-  color-scheme: dark;
-  background-color: #000;
   padding: 10px;
 }
 </style>
diff --git a/playground/src/main.ts b/playground/src/main.ts
index 8e5222125..c2246c045 100644
--- a/playground/src/main.ts
+++ b/playground/src/main.ts
@@ -1,4 +1,5 @@
 import { render, unmountComponent } from 'vue/vapor'
+import './style.css'
 
 const modules = import.meta.glob<any>('./*.(vue|js)')
 const mod = (modules['.' + location.pathname] || modules['./App.vue'])()
diff --git a/playground/src/style.css b/playground/src/style.css
new file mode 100644
index 000000000..4ad6222f9
--- /dev/null
+++ b/playground/src/style.css
@@ -0,0 +1,5 @@
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
+}