chore: add DarkToggle in playground

Author: LoTwT

packages/playground/src/App.preview.vue

@@ -6,6 +6,7 @@ import LargeData from './components/LargeData.vue'
 import { useAppStore } from './stores'
 
 import { availableLocales, loadLanguageAsync } from './modules/i18n'
+import DarkToggle from './components/DarkToggle.vue'
 
 const age = ref(10)
 const app = useAppStore()
@@ -27,6 +28,7 @@ async function toggleLocales() {
     <p>
       <em text-sm opacity-75>{{ t('intro.desc') }}</em>
     </p>
+    <DarkToggle />
     <p>
       <a icon-btn :title="t('button.toggle_langs')" @click="toggleLocales()">
         Toggle Langs

packages/playground/src/App.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import { useDark } from '@vueuse/core'
 import { computed, reactive, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useAppStore } from './stores'
 import EditState from './components/EditState.vue'
+import DarkToggle from './components/DarkToggle.vue'
 
 const app = useAppStore()
-const isDark = useDark()
 const doubleCount = computed(() => {
   return app.count * 2
 })
@@ -25,13 +24,10 @@ const route = useRoute()
 
 <template>
   <div>
-    <button @click="isDark = !isDark">
-      toggle dark mode
-    </button>
+    <DarkToggle />
     <EditState />
     <RouterView />
     {{ doubleCount }}
-    {{ isDark }}
     {{ app.count }}
     <RouterLink to="/hello">
       <div>

packages/playground/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/src/style.css

@@ -4,13 +4,15 @@
   line-height: 24px;
   font-weight: 400;
 
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  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;
+}