refactor: theming

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>

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>

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>

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>

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>

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>

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

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,

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>

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>

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>