feat: tailwind 2 + script setup!

src/logics/dark.ts

@@ -0,0 +1,23 @@
+import { watch, computed } from 'vue'
+import { usePreferredDark } from '@vueuse/core'
+import { colorSchema } from './store'
+
+const preferredDark = usePreferredDark()
+
+export const isDark = computed({
+  get() {
+    return colorSchema.value === 'auto' ? preferredDark.value : colorSchema.value === 'dark'
+  },
+  set(v: boolean) {
+    if (v === preferredDark.value)
+      colorSchema.value = 'auto'
+    else
+      colorSchema.value = v ? 'dark' : 'light'
+  },
+})
+
+watch(
+  isDark,
+  v => document.documentElement.classList.toggle('dark', v),
+  { immediate: true },
+)

src/logics/index.ts

@@ -0,0 +1,2 @@
+export * from './dark'
+export * from './store'

src/logics/store.ts

@@ -0,0 +1,4 @@
+import { Ref } from 'vue'
+import { useStorage } from '@vueuse/core'
+
+export const colorSchema = useStorage('color-schema', 'auto') as Ref<'auto' | 'dark' | 'light'>