chore: add DarkToggle in playground

Author: LoTwT

packages/playground/basic/src/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-
+import DarkToggle from './components/DarkToggle.vue'
 </script>
 
 <template>
@@ -27,5 +27,8 @@
         </span>
       </RouterLink>
     </div>
+    <div text-center>
+      <DarkToggle />
+    </div>
   </div>
 </template>

packages/playground/basic/src/components/DarkToggle.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { useDark } from '@vueuse/core'
+
+const isDark = useDark()
+</script>
+
+<template>
+  <button @click="isDark = !isDark">
+    toggle dark mode
+  </button>
+  <div>isDark: {{ isDark }}</div>
+</template>

packages/playground/basic/src/style.css

@@ -4,13 +4,19 @@
   line-height: 24px;
   font-weight: 400;
 
-  color-scheme: light dark;
+  /* color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+  background-color: #242424; */
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-text-size-adjust: 100%;
 }
+
+html.dark {
+  color-scheme: dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+}