feat: enhance UI components with consistent background styling for improved visibility

app/components/chat/CommandPalette.vue

@@ -40,7 +40,7 @@ defineShortcuts({
   meta_k: () => openMessageModal.value = !openMessageModal.value,
   meta_d: () => openClearModal.value = !openClearModal.value,
   l: () => changeLocale(currentLocale.value!.code === 'en' ? 'fr' : currentLocale.value!.code === 'fr' ? 'es' : 'en'),
-  t: () => toggleDark({ clientX: window.innerWidth, clientY: 0 }),
+  t: () => toggleDark({ clientX: window.innerWidth / 2, clientY: window.innerHeight }),
 })
 
 const modalUi = {
@@ -53,6 +53,14 @@ const commandPaletteUi = {
   item: 'data-highlighted:not-data-disabled:before:bg-muted',
   content: 'flex-1 overflow-y-auto',
 }
+
+function up() {
+  window.scrollTo({ top: 0, behavior: 'smooth' })
+}
+
+function down() {
+  window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' })
+}
 </script>
 
 <template>
@@ -61,6 +69,26 @@ const commandPaletteUi = {
     :class="active ? 'bottom-0 left-1/2 -translate-x-1/2' : 'max-w-[40rem] w-full md:bottom-1/5 left-1/2 -translate-x-1/2 bottom-0'"
   >
     <UCard variant="outline" class="rounded-xl shadow-lg w-full" :ui="{ body: 'p-2 sm:p-2 flex gap-2 w-full' }">
+      <ClientOnly>
+        <UFieldGroup v-if="active" class="flex items-center justify-center">
+          <UButton
+            icon="i-ph-arrow-fat-up-duotone"
+            color="neutral"
+            variant="outline"
+            class="cursor-pointer"
+            size="xl"
+            @click.prevent="up"
+          />
+          <UButton
+            icon="i-ph-arrow-fat-down-duotone"
+            color="neutral"
+            variant="outline"
+            class="cursor-pointer"
+            size="xl"
+            @click.prevent="down"
+          />
+        </UFieldGroup>
+      </ClientOnly>
       <UFieldGroup class="w-full">
         <UModal v-model:open="openMessageModal" :ui="modalUi" title="Hey" description="Hey">
           <UButton

app/components/tool/Activity.vue

@@ -93,7 +93,7 @@ const getActivity = computed(() => {
         </div>
       </div>
       <ClientOnly>
-        <UCard v-if="getActivity" variant="outline" class="md:max-w-1/2 m-1 shadow-sm" :ui="{ body: 'flex gap-8 items-center' }">
+        <UCard v-if="getActivity" variant="outline" class="md:max-w-1/2 m-1 shadow-sm bg-white dark:bg-neutral-900" :ui="{ body: 'flex gap-8 items-center' }">
           <UIcon
             :name="IDEs.find(ide => ide.name === getActivity!.name)!.icon"
             size="64"

app/components/tool/Contact.vue

@@ -19,7 +19,7 @@ const { t } = useI18n()
           variant="subtle"
           color="neutral"
           target="_blank"
-          class="m-1 shadow-sm"
+          class="m-1 shadow-sm bg-white dark:bg-neutral-900"
           :href="social.to"
           :aria-label="social.label"
         />

app/components/tool/Language.vue

@@ -19,7 +19,7 @@ const { changeLocale } = useLanguage()
       </ul>
     </div>
     <ClientOnly>
-      <UCard variant="outline" class="md:max-w-1/2 m-1 shadow-sm" :ui="{ body: 'flex justify-between items-center gap-2' }">
+      <UCard variant="outline" class="md:max-w-1/2 m-1 shadow-sm bg-white dark:bg-neutral-900" :ui="{ body: 'flex justify-between items-center gap-2' }">
         <p class="block">
           {{ t('tool.language.change') }}
         </p>

app/components/tool/Projects.vue

@@ -15,7 +15,7 @@ const date = (date: string) => useDateFormat(new Date(date), 'DD MMMM YYYY', { l
     <div v-if="projects" class="m-1 my-4 flex flex-col gap-4">
       <div v-for="project in projects" :key="project.id">
         <NuxtLink :to="`/projects/${project.slug}`">
-          <UCard variant="subtle" class="shadow-md">
+          <UCard variant="subtle" class="shadow-sm bg-white dark:bg-neutral-900">
             <h1 class="text-xl font-medium">
               {{ project.title }}
             </h1>

app/components/tool/Skills.vue

@@ -23,7 +23,7 @@ const { t, locale } = useI18n()
             :label="skill.name"
             variant="subtle"
             color="neutral"
-            class="shadow-md"
+            class="shadow-sm bg-white dark:bg-neutral-900"
             :icon="skill.icon"
           />
         </div>

app/components/tool/Theme.vue

@@ -17,7 +17,7 @@ const { dark, toggleDark } = useTheme()
       </ul>
     </div>
     <ClientOnly>
-      <UCard variant="outline" class="md:max-w-1/2 m-1 shadow-sm" :ui="{ body: 'flex justify-between items-center' }">
+      <UCard variant="outline" class="md:max-w-1/2 m-1 shadow-sm bg-white dark:bg-neutral-900" :ui="{ body: 'flex justify-between items-center' }">
         <div class="flex items-center gap-2">
           <UIcon v-if="dark" name="i-ph-moon-duotone" size="24" />
           <UIcon v-else name="i-ph-sun-duotone" size="24" />

app/components/tool/Weather.vue

@@ -7,7 +7,7 @@ const { data: weather } = await useAsyncData<Weather>('weather', () =>
 </script>
 
 <template>
-  <UCard v-if="weather" variant="outline" class="md:max-w-2/3 m-1 shadow-sm">
+  <UCard v-if="weather" variant="outline" class="md:max-w-2/3 m-1 shadow-sm bg-white dark:bg-neutral-900">
     <template #header>
       <div class="flex gap-4 items-center">
         <UIcon name="i-ph-cloud-duotone" size="24" />