🔍 Sitemap!

♿ Dark mode to protect your eyes

app.vue

@@ -7,5 +7,16 @@
 </template>
 
 <script setup lang="ts">
+import { useTheme } from "vuetify"
 import "@unocss/reset/tailwind.css"
+
+const theme = useTheme()
+
+onMounted(() => {
+  theme.global.name.value = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
+
+  window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", event => {
+    theme.global.name.value = event.matches ? "dark" : "light"
+  })
+})
 </script>