refactor: theming

2022-11-23 10:16:31 +08:00 · 2022-11-23 10:16:31 +08:00 · a4d235b6fe
commit a4d235b6fe
parent 9a77c7da2a
22 changed files with 351 additions and 39 deletions
--- 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>
--- 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>
--- 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>
--- a/components/common/Dropdown.vue
+++ 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>
--- 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>
--- 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>
--- 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>
--- 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
--- 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,
--- 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>
--- 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>
--- 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>
--- a/composables/dark.ts
+++ b/composables/dark.ts
@ -0,0 +1,2 @@
+export const isDark = useDark()
+export const toggleDark = useToggle(isDark)
--- 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>
--- 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: {
--- 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"
  }
 }
--- 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>

--- 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:
--- 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;
 }

--- 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;
 }
--- 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"
+    ]
  }
 }
--- 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)',
    },
  },
 })