Refactor CSS variables and update button variant in CatchPhrase and [slug] components

app/assets/css/main.css

@@ -3,6 +3,12 @@
 
 @plugin "@tailwindcss/typography";
 
-body {
-    @apply bg-white dark:bg-neutral-950;
+:root {
+    --ui-white: #ffffff;
+    --ui-black: #000000;
+}
+
+.dark {
+    --ui-white: #ffffff;
+    --ui-black: #000000;
 }

app/components/home/CatchPhrase.vue

@@ -33,3 +33,15 @@ const { t } = useI18n({
   }
 }
 </i18n>
+
+<style scoped>
+@keyframes wave {
+    0%,
+    100% {
+      transform: rotate(-3deg) scale(1);
+    }
+    50% {
+      transform: rotate(3deg) scale(1.1);
+    }
+  }
+</style>

app/pages/writings/[slug].vue

@@ -122,21 +122,20 @@ function scrollToSection(id: string) {
           side: 'bottom',
           sideOffset: 8,
         }"
-        :ui="{ content: 'cursor-pointer z-50 bg-[#fff] dark:bg-neutral-900 shadow-lg rounded-md ring ring-gray-100 dark:ring-neutral-800 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-popover-content-transform-origin) focus:outline-none pointer-events-auto' }"
       >
         <UButton
           :label="t('toc')"
-          variant="subtle"
+          variant="solid"
           color="neutral"
-          class="cursor-pointer text-white"
+          class="cursor-pointer"
         />
 
         <template #content>
-          <div class="p-2 z-50 bg-white flex flex-col gap-y-2">
+          <div class="p-2 z-50 flex flex-col gap-y-2">
             <div
               v-for="link in post!.body!.toc!.links"
               :key="link.id"
-              class="inline bg-white"
+              class="inline"
             >
               <UButton
                 size="lg"