From a4d235b6fe3060441a34af13c328133d2447dc00 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Wed, 23 Nov 2022 10:16:31 +0800
Subject: [PATCH] refactor: theming

---
 app.vue                                       |  10 +-
 components/account/AccountHeader.vue          |   2 +-
 .../account/AccountPaginator.client.vue       |   4 +-
 components/common/Dropdown.vue                |  17 ++
 .../ConversationPaginator.client.vue          |   4 +-
 components/nav/NavFooter.vue                  |   7 +-
 .../NotificationPaginator.client.vue          |   4 +-
 components/publish/PublishWidget.client.vue   |   2 +-
 components/status/StatusAttachment.vue        |   4 +-
 components/status/StatusDetails.vue           |   2 +-
 components/timeline/TimelineList.vue          |   2 +-
 .../timeline/TimelinePaginator.client.vue     |   4 +-
 composables/dark.ts                           |   2 +
 layouts/default.vue                           |   4 +-
 nuxt.config.ts                                |  11 +-
 package.json                                  |   4 +-
 pages/@[user]/[post].vue                      |   8 +-
 pnpm-lock.yaml                                | 262 ++++++++++++++++++
 styles/global.css                             |   8 +-
 styles/vars.css                               |  11 +-
 tsconfig.json                                 |  10 +-
 unocss.config.ts                              |   8 +-
 22 files changed, 351 insertions(+), 39 deletions(-)
 create mode 100644 components/common/Dropdown.vue
 create mode 100644 composables/dark.ts

diff --git a/app.vue b/app.vue
index e5c00115..84c2cb97 100644
--- a/app.vue
+++ b/app.vue
@@ -7,6 +7,9 @@ useHead({
     },
   ],
 })
+
+// eslint-disable-next-line no-unused-expressions
+isDark.value
 </script>
 
 <template>
@@ -24,7 +27,10 @@ html, body , #__nuxt{
 }
 
 html.dark {
-  background: #222;
-  color: white;
+  color-scheme: dark;
+}
+
+html {
+  --at-apply: bg-base text-base;
 }
 </style>
diff --git a/components/account/AccountHeader.vue b/components/account/AccountHeader.vue
index a6b71e1d..6e19946d 100644
--- a/components/account/AccountHeader.vue
+++ b/components/account/AccountHeader.vue
@@ -13,7 +13,7 @@ const createdAt = $computed(() => {
 
 <template>
   <div flex flex-col>
-    <div border="b border">
+    <div border="b base">
       <img h-50 w-full object-cover :src="account.header">
     </div>
     <div p3 style="margin-top:-3.5rem;" flex flex-col gap-6>
diff --git a/components/account/AccountPaginator.client.vue b/components/account/AccountPaginator.client.vue
index 0e75d1d5..add4b7d0 100644
--- a/components/account/AccountPaginator.client.vue
+++ b/components/account/AccountPaginator.client.vue
@@ -9,12 +9,12 @@ const { paginator } = defineProps<{
 <template>
   <CommonPaginator
     :paginator="paginator"
-    border="t border"
+    border="t base"
   >
     <template #default="{ item }">
       <AccountCard
         :account="item"
-        border="b border" py-1
+        border="b base" py-1
       />
     </template>
   </CommonPaginator>
diff --git a/components/common/Dropdown.vue b/components/common/Dropdown.vue
new file mode 100644
index 00000000..f6caf089
--- /dev/null
+++ b/components/common/Dropdown.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const { modelValue } = defineModel<{
+  modelValue: boolean
+}>()
+
+const el = ref<HTMLDivElement>()
+
+onClickOutside(el, () => {
+  modelValue.value = false
+})
+</script>
+
+<template>
+  <div ref="el" absolute bg-base>
+    <slot />
+  </div>
+</template>
diff --git a/components/conversation/ConversationPaginator.client.vue b/components/conversation/ConversationPaginator.client.vue
index 598da49c..29cd2b42 100644
--- a/components/conversation/ConversationPaginator.client.vue
+++ b/components/conversation/ConversationPaginator.client.vue
@@ -9,12 +9,12 @@ const { paginator } = defineProps<{
 <template>
   <CommonPaginator
     :paginator="paginator"
-    border="t border"
+    border="t base"
   >
     <template #default="{ item }">
       <ConversationCard
         :conversation="item"
-        border="b border" py-1
+        border="b base" py-1
       />
     </template>
   </CommonPaginator>
diff --git a/components/nav/NavFooter.vue b/components/nav/NavFooter.vue
index e5116768..917a3d77 100644
--- a/components/nav/NavFooter.vue
+++ b/components/nav/NavFooter.vue
@@ -6,8 +6,9 @@ const buildTimeAgo = useTimeAgo(buildTime)
 </script>
 
 <template>
-  <div p4 text-sm op25>
-    A Mastodon client by Nuxt<br>
-    Built <span :title="buildTime">{{ buildTimeAgo }}</span> · <a href="https://github.com/antfu/nuxtodon" target="_blank">GitHub</a>
+  <div p4 text-sm op25 flex="~ col">
+    <button i-ri-sun-line dark:i-ri-moon-line text-lg mb4 @click="toggleDark()" />
+    <div>A Mastodon client by Nuxt</div>
+    <div>Built <span :title="buildTime">{{ buildTimeAgo }}</span> · <a href="https://github.com/antfu/nuxtodon" target="_blank">GitHub</a></div>
   </div>
 </template>
diff --git a/components/notification/NotificationPaginator.client.vue b/components/notification/NotificationPaginator.client.vue
index b539d0ca..36d480e8 100644
--- a/components/notification/NotificationPaginator.client.vue
+++ b/components/notification/NotificationPaginator.client.vue
@@ -9,12 +9,12 @@ const { paginator } = defineProps<{
 <template>
   <CommonPaginator
     :paginator="paginator"
-    border="t border"
+    border="t base"
   >
     <template #default="{ item }">
       <NotificationCard
         :notification="item"
-        border="t border" pt-4
+        border="t base" pt-4
       />
     </template>
   </CommonPaginator>
diff --git a/components/publish/PublishWidget.client.vue b/components/publish/PublishWidget.client.vue
index 49b286f1..4fbc68ac 100644
--- a/components/publish/PublishWidget.client.vue
+++ b/components/publish/PublishWidget.client.vue
@@ -51,7 +51,7 @@ onUnmounted(() => {
       v-model="draft.status"
       :placeholder="placeholder"
       p2 border-rounded w-full h-40
-      bg-gray:10 outline-none border="~ border"
+      bg-gray:10 outline-none border="~ base"
     />
     <div flex justify-end>
       <button
diff --git a/components/status/StatusAttachment.vue b/components/status/StatusAttachment.vue
index 0c760560..1b8b3825 100644
--- a/components/status/StatusAttachment.vue
+++ b/components/status/StatusAttachment.vue
@@ -31,7 +31,7 @@ const aspectRatio = computed(() => {
       :style="{
         aspectRatio,
       }"
-      border="~ border"
+      border="~ base"
       object-cover rounded-lg
     />
   </template>
@@ -39,7 +39,7 @@ const aspectRatio = computed(() => {
     <video
       :poster="attachment.previewUrl"
       controls
-      border="~ border"
+      border="~ base"
       object-cover
       :style="{
         aspectRatio,
diff --git a/components/status/StatusDetails.vue b/components/status/StatusDetails.vue
index ad0f7c56..f9b1074a 100644
--- a/components/status/StatusDetails.vue
+++ b/components/status/StatusDetails.vue
@@ -29,6 +29,6 @@ const date = computed(() => formatter.format(new Date(status.createdAt)))
         {{ date }} · {{ status.application?.name || 'Unknown client' }}
       </span>
     </div>
-    <StatusActions :status="status" border="t border" pt-2 />
+    <StatusActions :status="status" border="t base" pt-2 />
   </div>
 </template>
diff --git a/components/timeline/TimelineList.vue b/components/timeline/TimelineList.vue
index fed78035..723b3fd1 100644
--- a/components/timeline/TimelineList.vue
+++ b/components/timeline/TimelineList.vue
@@ -8,6 +8,6 @@ defineProps<{
 
 <template>
   <template v-for="status of timelines" :key="status.id">
-    <StatusCard :status="status" border="t border" pt-4 />
+    <StatusCard :status="status" border="t base" pt-4 />
   </template>
 </template>
diff --git a/components/timeline/TimelinePaginator.client.vue b/components/timeline/TimelinePaginator.client.vue
index 88bb5c47..ed65d43a 100644
--- a/components/timeline/TimelinePaginator.client.vue
+++ b/components/timeline/TimelinePaginator.client.vue
@@ -9,12 +9,12 @@ const { paginator } = defineProps<{
 <template>
   <CommonPaginator
     :paginator="paginator"
-    border="t border"
+    border="t base"
   >
     <template #default="{ item }">
       <StatusCard
         :status="item"
-        border="b border" py-3
+        border="b base" py-3
       />
     </template>
   </CommonPaginator>
diff --git a/composables/dark.ts b/composables/dark.ts
new file mode 100644
index 00000000..a2a21dd1
--- /dev/null
+++ b/composables/dark.ts
@@ -0,0 +1,2 @@
+export const isDark = useDark()
+export const toggleDark = useToggle(isDark)
diff --git a/layouts/default.vue b/layouts/default.vue
index e3dbcf9e..4f87a135 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -9,14 +9,14 @@
         </div>
       </div>
       <div class="lg:w-3/4" flex>
-        <div class="w-full md:w-2/3" border="l r border" min-h-screen>
+        <div class="w-full md:w-2/3" border="l r base" min-h-screen>
           <slot />
         </div>
         <div hidden md:flex="~ col" class="w-1/3">
           <div fixed>
             <slot name="right">
               <NavTitle p5 />
-              <NavSide border="y border" py8 />
+              <NavSide border="y base" py8 />
               <div flex-auto />
               <NavFooter />
             </slot>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 2431e382..2fccc56a 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,10 +1,11 @@
+import VueMacros from 'unplugin-vue-macros/vite'
+
 export default defineNuxtConfig({
   ssr: false,
   modules: [
     '@vueuse/nuxt',
     '@unocss/nuxt',
     '@pinia/nuxt',
-    '@nuxtjs/color-mode',
   ],
   experimental: {
     reactivityTransform: true,
@@ -15,9 +16,6 @@ export default defineNuxtConfig({
     '~/styles/vars.css',
     '~/styles/global.css',
   ],
-  colorMode: {
-    classSuffix: '',
-  },
   alias: {
     querystring: 'rollup-plugin-node-polyfills/polyfills/qs',
   },
@@ -28,6 +26,11 @@ export default defineNuxtConfig({
     build: {
       target: 'esnext',
     },
+    plugins: [
+      VueMacros({
+        defineModel: true,
+      }),
+    ],
   },
   postcss: {
     plugins: {
diff --git a/package.json b/package.json
index c01be631..73210ff0 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "@types/fs-extra": "^9.0.13",
     "@types/sanitize-html": "^2.6.2",
     "@unocss/nuxt": "^0.46.5",
+    "@vue-macros/volar": "^0.5.3",
     "@vueuse/nuxt": "^9.5.0",
     "blurhash": "^2.0.4",
     "eslint": "^8.27.0",
@@ -35,6 +36,7 @@
     "rollup-plugin-node-polyfills": "^0.2.1",
     "sanitize-html": "^2.7.3",
     "typescript": "^4.9.3",
-    "ufo": "^1.0.0"
+    "ufo": "^1.0.0",
+    "unplugin-vue-macros": "^0.16.4"
   }
 }
diff --git a/pages/@[user]/[post].vue b/pages/@[user]/[post].vue
index 9246267f..534e97d9 100644
--- a/pages/@[user]/[post].vue
+++ b/pages/@[user]/[post].vue
@@ -11,10 +11,10 @@ const { data: context } = await useAsyncData(`${id}-context`, () => masto.status
 <template>
   <template v-if="status">
     <template v-for="comment of context?.ancestors" :key="comment.id">
-      <StatusCard :status="comment" border="t border" pt-4 />
+      <StatusCard :status="comment" border="t base" pt-4 />
     </template>
-    <StatusDetails :status="status" border="t border" pt-4 />
-    <div v-if="currentUser" border="t border" p6 flex gap-4>
+    <StatusDetails :status="status" border="t base" pt-4 />
+    <div v-if="currentUser" border="t base" p6 flex gap-4>
       <AccountAvatar :account="currentUser.account" w-10 h-10 />
       <PublishWidget
         w-full
@@ -25,7 +25,7 @@ const { data: context } = await useAsyncData(`${id}-context`, () => masto.status
     </div>
 
     <template v-for="comment of context?.descendants" :key="comment.id">
-      <StatusCard :status="comment" border="t border" pt-4 />
+      <StatusCard :status="comment" border="t base" pt-4 />
     </template>
   </template>
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a60727b4..40ddaf2a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,7 @@ specifiers:
   '@types/fs-extra': ^9.0.13
   '@types/sanitize-html': ^2.6.2
   '@unocss/nuxt': ^0.46.5
+  '@vue-macros/volar': ^0.5.3
   '@vueuse/nuxt': ^9.5.0
   blurhash: ^2.0.4
   eslint: ^8.27.0
@@ -25,6 +26,7 @@ specifiers:
   sanitize-html: ^2.7.3
   typescript: ^4.9.3
   ufo: ^1.0.0
+  unplugin-vue-macros: ^0.16.4
 
 devDependencies:
   '@antfu/eslint-config': 0.30.1_e3uo4sehh4zr4i6m57mkkxxv7y
@@ -37,6 +39,7 @@ devDependencies:
   '@types/fs-extra': 9.0.13
   '@types/sanitize-html': 2.6.2
   '@unocss/nuxt': 0.46.5
+  '@vue-macros/volar': 0.5.3
   '@vueuse/nuxt': 9.5.0_nuxt@3.0.0
   blurhash: 2.0.4
   eslint: 8.27.0
@@ -51,6 +54,7 @@ devDependencies:
   sanitize-html: 2.7.3
   typescript: 4.9.3
   ufo: 1.0.0
+  unplugin-vue-macros: 0.16.4
 
 packages:
 
@@ -162,6 +166,10 @@ packages:
     resolution: {integrity: sha512-CQkeV+oJxUazwjlHD0/3ZD08QWKuGQkhnrKo3e6ly5pd48VUpXbb77q0xMU4+vc2CkJnDS02Eq/M9ugyX20XZA==}
     dev: true
 
+  /@antfu/utils/0.6.3:
+    resolution: {integrity: sha512-sEYpyyKUPOew9QsXZ8feRVMzW6DWLviwOl+/ap06UQW02A8Srbc95CPHVm4eUbiBzBgD46eyIT+przv//KSSlQ==}
+    dev: true
+
   /@babel/code-frame/7.18.6:
     resolution: {integrity: sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==}
     engines: {node: '>=6.9.0'}
@@ -1671,6 +1679,14 @@ packages:
       - supports-color
     dev: true
 
+  /@vitejs/plugin-vue/3.2.0:
+    resolution: {integrity: sha512-E0tnaL4fr+qkdCNxJ+Xd0yM31UwMkQje76fsDVBBUCoGOUPexu2VDUYHL8P4CwV+zMvWw6nlRw19OnRKmYAJpw==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      vite: ^3.0.0
+      vue: ^3.2.25
+    dev: true
+
   /@vitejs/plugin-vue/3.2.0_vite@3.2.4+vue@3.2.45:
     resolution: {integrity: sha512-E0tnaL4fr+qkdCNxJ+Xd0yM31UwMkQje76fsDVBBUCoGOUPexu2VDUYHL8P4CwV+zMvWw6nlRw19OnRKmYAJpw==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -1682,6 +1698,180 @@ packages:
       vue: 3.2.45
     dev: true
 
+  /@volar/language-core/1.0.9:
+    resolution: {integrity: sha512-5Fty3slLet6svXiJw2YxhYeo6c7wFdtILrql5bZymYLM+HbiZtJbryW1YnUEKAP7MO9Mbeh+TNH4Z0HFxHgIqw==}
+    dependencies:
+      '@volar/source-map': 1.0.9
+      '@vue/reactivity': 3.2.45
+      muggle-string: 0.1.0
+    dev: true
+
+  /@volar/source-map/1.0.9:
+    resolution: {integrity: sha512-fazB/vy5ZEJ3yKx4fabJyGNI3CBkdLkfEIRVu6+1P3VixK0Mn+eqyUIkLBrzGYaeFM3GybhCLCvsVdNz0Fu/CQ==}
+    dependencies:
+      muggle-string: 0.1.0
+    dev: true
+
+  /@vue-macros/api/0.2.0:
+    resolution: {integrity: sha512-E0rhhszd3MSE8l+A78gj9ONs4lsqOLHpONNzrc7H2nlPhEDsp4ZyQt+A9rRfxX+BTeLYfq64mli2qRV0tixiaw==}
+    engines: {node: '>=14.19.0'}
+    dependencies:
+      '@babel/types': 7.20.2
+      '@vue-macros/common': 0.13.4
+    dev: true
+
+  /@vue-macros/better-define/0.2.0:
+    resolution: {integrity: sha512-hcYGpfGLGBw+32jQyAwJU4bd1eE95cD7/aqv9Ov86LJFR5nZ/d7P/Fh1HJBE4KUxC9vJa2ZtdkdiV83n6NADYA==}
+    engines: {node: '>=14.19.0'}
+    dependencies:
+      '@rollup/pluginutils': 4.2.1
+      '@vue-macros/api': 0.2.0
+      '@vue-macros/common': 0.13.4
+      unplugin: 1.0.0
+    dev: true
+
+  /@vue-macros/common/0.13.4:
+    resolution: {integrity: sha512-mQooO33XcY4kQyKBrbGfdIPPsYhpcfmH75SQnXx2vNsNLSNvhLuDaIIV0fhMJ0HV5Z02V9Ka1gx7v1g5bk9Q0A==}
+    engines: {node: '>=14.19.0'}
+    dependencies:
+      '@babel/types': 7.20.2
+      '@vue/compiler-sfc': 3.2.45
+      magic-string: 0.26.7
+    dev: true
+
+  /@vue-macros/define-model/0.14.1:
+    resolution: {integrity: sha512-Mwg/+OGDTEzaGyGXcAUJ0ZfEmgXKEVeWk3zVR6wC7l0f8OOBZ4lb1gWq9NJT+D1Xxy34mdNmkmRVoevW5kN0iQ==}
+    engines: {node: '>=14.19.0'}
+    peerDependencies:
+      '@vueuse/core': ^9.0.0
+    peerDependenciesMeta:
+      '@vueuse/core':
+        optional: true
+    dependencies:
+      '@rollup/pluginutils': 4.2.1
+      '@vue-macros/common': 0.13.4
+      ast-walker-scope: 0.3.0
+      unplugin: 1.0.0
+    dev: true
+
+  /@vue-macros/define-props/0.0.3:
+    resolution: {integrity: sha512-GAiALWSrIogwdjbIe60Hi4CSvWFmZG7KySK8JBf7lszWNgoSirj/NKzmJOaHY0/I217tfq4Ew/brbdvcEhCikg==}
+    engines: {node: '>=14.19.0'}
+    peerDependencies:
+      vue: ^3.2.25
+    dependencies:
+      '@rollup/pluginutils': 4.2.1
+      '@vue-macros/common': 0.13.4
+      unplugin: 1.0.0
+    dev: true
+
+  /@vue-macros/define-render/0.13.9:
+    resolution: {integrity: sha512-TD4/vpVagRiOELKMzbT8VpLd0vTgYcjLzO/GVmtXLQ7LxnAgOQCTdmoQNfCp4B2Jx0KgKINgZJIoHV2c9n84pA==}
+    engines: {node: '>=14.19.0'}
+    peerDependencies:
+      vue: ^2.7.0 || ^3.0.0
+    dependencies:
+      '@rollup/pluginutils': 4.2.1
+      '@vue-macros/common': 0.13.4
+      unplugin: 1.0.0
+    dev: true
+
+  /@vue-macros/define-slots/0.0.6:
+    resolution: {integrity: sha512-pK4P/oUjcrP/Rr5clsV2eZ53OJ3QlU2fZlnn91w++L0+lio+0M06ptr/IkHNVLNQ9U9Z43MkjHkMLX8Df8BknA==}
+    engines: {node: '>=14.19.0'}
+    peerDependencies:
+      vue: ^2.7.0 || ^3.0.0
+    dependencies:
+      '@rollup/pluginutils': 4.2.1
+      '@vue-macros/common': 0.13.4
+      unplugin: 1.0.0
+    dev: true
+
+  /@vue-macros/hoist-static/0.12.8:
+    resolution: {integrity: sha512-aSjTBntS/DhQvhyvbSluXwVtrw1WRAxcGjIJTUrgXLyagurIt0KQR8B2ut4ulnMzRaxD8TYmhoWmnzkSNUpXdw==}
+    engines: {node: '>=14.19.0'}
+    dependencies:
+      '@rollup/pluginutils': 4.2.1
+      '@vue-macros/common': 0.13.4
+      unplugin: 1.0.0
+    dev: true
+
+  /@vue-macros/named-template/0.0.6:
+    resolution: {integrity: sha512-nEoutSYbwu7QC+uWcs90rD28erP6xZ0aU4uYnrxTUnVcbga9xMchxcs3MgI/2ax6dz/EXf1f1utYXXpGgLi+Tw==}
+    engines: {node: '>=14.19.0'}
+    dependencies:
+      '@rollup/pluginutils': 4.2.1
+      '@vitejs/plugin-vue': 3.2.0
+      '@vue-macros/common': 0.13.4
+      '@vue/compiler-dom': 3.2.45
+      unplugin: 1.0.0
+      unplugin-combine: 0.2.8
+    transitivePeerDependencies:
+      - esbuild
+      - rollup
+      - vite
+      - vue
+      - webpack
+    dev: true
+
+  /@vue-macros/setup-component/0.12.8:
+    resolution: {integrity: sha512-2tRMl8l8OYMpIRYsZyAZfH0dNT7CONMTcmdGEffJb5GvK8XOmdgGk7NFUhaQg3EEnk1SUq1Kdcx+gyH/a0qE4A==}
+    engines: {node: '>=14.19.0'}
+    dependencies:
+      '@rollup/pluginutils': 4.2.1
+      '@vue-macros/common': 0.13.4
+      unplugin: 1.0.0
+      unplugin-combine: 0.2.8
+    transitivePeerDependencies:
+      - esbuild
+      - rollup
+      - vite
+      - webpack
+    dev: true
+
+  /@vue-macros/setup-sfc/0.12.8:
+    resolution: {integrity: sha512-eOQxlY53GD/WkJrDHpDvHecWQ70Cw9aSYwS9eT1dQ9vWJVeJ/2R96z09GfYKz6cr9T00OPeZjftU5sC1FO+3xA==}
+    engines: {node: '>=14.19.0'}
+    dependencies:
+      '@rollup/pluginutils': 4.2.1
+      '@vue-macros/common': 0.13.4
+      unplugin: 1.0.0
+    dev: true
+
+  /@vue-macros/short-emits/0.12.9:
+    resolution: {integrity: sha512-DrvdyMuiqSVLY26VJCLm5neVmqiAlEVbLAmdH9gORGDn2u+OsmyY9bb2T+04PGzBsu2F64XbJwi0GmXypdcLgQ==}
+    engines: {node: '>=14.19.0'}
+    dependencies:
+      '@rollup/pluginutils': 4.2.1
+      '@vue-macros/common': 0.13.4
+      unplugin: 1.0.0
+    dev: true
+
+  /@vue-macros/short-vmodel/0.3.8:
+    resolution: {integrity: sha512-S2MP0/ZusUWpnfCJ5J9lSaEhIbaGB9uxmsUI9liA+bFH5yqPG+DDw63tod2HLfthxk9hPQcz1YZR/ZEd3wUaRA==}
+    engines: {node: '>=14.19.0'}
+    dependencies:
+      '@vue-macros/common': 0.13.4
+      '@vue/compiler-core': 3.2.45
+    dev: true
+
+  /@vue-macros/volar/0.5.3:
+    resolution: {integrity: sha512-M0dBOZrOT2kGcay3+oDYdif4EepfmBU5bNVlnojTufTGAsmEtiS/CfqexCDH+zBxfjEpc9bqHVSYFxswPkxjpA==}
+    peerDependencies:
+      vue-tsc: ^1.0.9
+    peerDependenciesMeta:
+      vue-tsc:
+        optional: true
+    dependencies:
+      '@volar/language-core': 1.0.9
+      '@vue-macros/common': 0.13.4
+      '@vue-macros/define-props': 0.0.3
+      '@vue-macros/short-vmodel': 0.3.8
+      muggle-string: 0.1.0
+    transitivePeerDependencies:
+      - vue
+    dev: true
+
   /@vue/babel-helper-vue-transform-on/1.0.2:
     resolution: {integrity: sha512-hz4R8tS5jMn8lDq6iD+yWL6XNB699pGIVLk7WSJnn1dbpjaazsjZQkieJoRX6gW5zpYSCFqQ7jUquPNY65tQYA==}
     dev: true
@@ -2017,6 +2207,14 @@ packages:
       es-shim-unscopables: 1.0.0
     dev: true
 
+  /ast-walker-scope/0.3.0:
+    resolution: {integrity: sha512-bsOBv3jB+1kGaxwPHhkLiagS+75KfzEqtkNWvATgMGtXM6kJZG3PlG4fYQFMiHeLpoAkwc6G61w07+hEXx39aA==}
+    engines: {node: '>=14.19.0'}
+    dependencies:
+      '@babel/parser': 7.20.3
+      '@babel/types': 7.20.2
+    dev: true
+
   /async-sema/3.1.1:
     resolution: {integrity: sha512-tLRNUXati5MFePdAk8dw7Qt7DpxPB60ofAgn8WRhW6a2rcimZnYBP9oxHiv0OHy+Wz7kPMG+t4LGdt31+4EmGg==}
     dev: true
@@ -4917,6 +5115,10 @@ packages:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
     dev: true
 
+  /muggle-string/0.1.0:
+    resolution: {integrity: sha512-Tr1knR3d2mKvvWthlk7202rywKbiOm4rVFLsfAaSIhJ6dt9o47W4S+JMtWhd/PW9Wrdew2/S2fSvhz3E2gkfEg==}
+    dev: true
+
   /mute-stream/0.0.8:
     resolution: {integrity: sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==}
     dev: true
@@ -6933,6 +7135,66 @@ packages:
       - vite
     dev: true
 
+  /unplugin-combine/0.2.8:
+    resolution: {integrity: sha512-Z38AC/TEjXbVyZ5HjVqo+lADj0/dcfwWC0Z4y0LNhybJzJQwmcMxm+ZsqHY3faauj4YigmlRMdptR5JEW9RuLg==}
+    engines: {node: '>=14.19.0'}
+    peerDependencies:
+      esbuild: '>=0.13'
+      rollup: ^2.50.0
+      vite: ^2.3.0 || ^3.0.0
+      webpack: 4 || 5
+    peerDependenciesMeta:
+      esbuild:
+        optional: true
+      rollup:
+        optional: true
+      vite:
+        optional: true
+      webpack:
+        optional: true
+    dependencies:
+      '@antfu/utils': 0.6.3
+      unplugin: 0.10.2
+    dev: true
+
+  /unplugin-vue-define-options/0.12.8:
+    resolution: {integrity: sha512-/5NjICUI9Ick6LI31pc0jTh7DUdEBerLS3UKor3AanldLtqKWYd0lzjHjgg4JXUvuOEkpDf7e0f3jpqE362mKA==}
+    engines: {node: '>=14.19.0'}
+    dependencies:
+      '@rollup/pluginutils': 4.2.1
+      '@vue-macros/common': 0.13.4
+      ast-walker-scope: 0.3.0
+      unplugin: 1.0.0
+    dev: true
+
+  /unplugin-vue-macros/0.16.4:
+    resolution: {integrity: sha512-1dxQ/U4rZhf+LXP/7HSP2ycjCYQFCSB3QYu3zGPSiuN9M3yWjDkSTcXQcsFcdEvJGMbFWzKB/NJd4PnEqhQWOQ==}
+    engines: {node: '>=14.19.0'}
+    peerDependencies:
+      vue: ^2.7.0 || ^3.2.25
+    dependencies:
+      '@rollup/pluginutils': 4.2.1
+      '@vue-macros/better-define': 0.2.0
+      '@vue-macros/define-model': 0.14.1
+      '@vue-macros/define-props': 0.0.3
+      '@vue-macros/define-render': 0.13.9
+      '@vue-macros/define-slots': 0.0.6
+      '@vue-macros/hoist-static': 0.12.8
+      '@vue-macros/named-template': 0.0.6
+      '@vue-macros/setup-component': 0.12.8
+      '@vue-macros/setup-sfc': 0.12.8
+      '@vue-macros/short-emits': 0.12.9
+      local-pkg: 0.4.2
+      unplugin-combine: 0.2.8
+      unplugin-vue-define-options: 0.12.8
+    transitivePeerDependencies:
+      - '@vueuse/core'
+      - esbuild
+      - rollup
+      - vite
+      - webpack
+    dev: true
+
   /unplugin/0.10.2:
     resolution: {integrity: sha512-6rk7GUa4ICYjae5PrAllvcDeuT8pA9+j5J5EkxbMFaV+SalHhxZ7X2dohMzu6C3XzsMT+6jwR/+pwPNR3uK9MA==}
     dependencies:
diff --git a/styles/global.css b/styles/global.css
index 7712fb9a..c920ffa9 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -1,5 +1,5 @@
 * {
-  scrollbar-color: #5555 var(--color-border);
+  scrollbar-color: #5555 var(--c-border);
 }
 
 ::-webkit-scrollbar {
@@ -11,7 +11,7 @@
 }
 
 ::-webkit-scrollbar-track {
-  background: var(--color-border);
+  background: var(--c-border);
   border-radius: 1px;
 }
 
@@ -31,8 +31,8 @@ html {
 
 .custom-emoji {
   display: inline-block;
-  height: 1.2em;
-  width: 1.2em;
+  max-height: 1.2em;
+  max-width: 1.2em;
   vertical-align: middle;
 }
 
diff --git a/styles/vars.css b/styles/vars.css
index bd283b60..6436b647 100644
--- a/styles/vars.css
+++ b/styles/vars.css
@@ -1,4 +1,11 @@
 :root {
-  --color-primary: #53b3cb;
-  --color-border: #88888820;
+  --c-primary: #53b3cb;
+  --c-border: #88888820;
+  --c-bg-base: #fff;
+  --c-text-base: #222;
+}
+
+.dark {
+  --c-bg-base: #111;
+  --c-text-base: #fff;
 }
diff --git a/tsconfig.json b/tsconfig.json
index 84de3baa..12539ff5 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,14 @@
 {
   "extends": "./.nuxt/tsconfig.json",
   "compilerOptions": {
-    "strict": true
+    "types": [
+      "unplugin-vue-macros/macros-global"
+    ]
+  },
+  "vueCompilerOptions": {
+    "plugins": [
+      "@vue-macros/volar/define-model",
+      "@vue-macros/volar/short-vmodel"
+    ]
   }
 }
diff --git a/unocss.config.ts b/unocss.config.ts
index d2dfb2ce..c2be019c 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -11,6 +11,11 @@ import {
 
 export default defineConfig({
   shortcuts: [
+    {
+      'border-base': 'border-$c-border',
+      'bg-base': 'bg-$c-bg-base',
+      'text-base': 'text-$c-text-base',
+    },
   ],
   presets: [
     presetUno({
@@ -35,8 +40,7 @@ export default defineConfig({
   ],
   theme: {
     colors: {
-      primary: 'var(--color-primary)',
-      border: 'var(--color-border)',
+      primary: 'var(--c-primary)',
     },
   },
 })