Change css style

src/assets/css/main.scss

@@ -9,7 +9,7 @@
 
 body {
   @apply bg-gray-100;
-  @apply dark:bg-gray-900;
+  @apply dark:bg-zinc-900;
   @apply font-inter;
   @apply dark:text-slate-400;
 }

src/components/Card/VCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="shadow-sm bg-white print:shadow-none print:border-0 dark:bg-gray-800">
+  <div class="shadow-sm bg-white print:shadow-none print:border-0 dark:bg-zinc-800">
     <slot />
   </div>
 </template>

src/components/Gallery/GalleryImage.vue

@@ -4,10 +4,11 @@
       class="
         flex
         justify-center 
+        border
+        print:hidden
         bg-white  
-        dark:bg-gray-800 
-        border print:hidden 
-        dark:border-gray-700"
+        dark:bg-zinc-800 
+        dark:border-zinc-800"
     >
       <div class="h-80 max-h-80 flex items-center justify-center">
         <img
@@ -21,11 +22,15 @@
       <div 
         v-for="(image, index) in images"
         :key="image.id"
+        class="
+          pr-1
+          pt-1
+          pb-1
+          last:pr-0"
       >
         <GalleryThumbnail
           :image="image"
           :title="image.depictions.map(d => d.label).join(';')"
-          class="first:ml-0"
           @click="
             galleryIndex = index;
             isImageViewerOpen = true

src/components/Gallery/GalleryThumbnail.vue

@@ -1,18 +1,18 @@
 <template>
   <div 
-    class="ml-1 mr-1 mt-2 bg-white dark:bg-gray-800 flex flex-col justify-center cursor-pointer w-24 h-24 border dark:border-gray-700"
+    class="bg-white dark:bg-gray-800 flex flex-col justify-center cursor-pointer w-24 h-24 border dark:border-gray-700"
     :title="title"
   >
     <img 
-      class="max-h-24 max-w-24"
+      class="h-24 w-24 max-h-24 max-w-24 object-cover"
       :src="image.thumb"
     >
   </div>
 </template>
 
 <script setup>
 
-const props = defineProps({
+defineProps({
   image: {
     type: Object,
     required: true

src/components/Gallery/ImageAttribution.vue

@@ -6,7 +6,7 @@
 
 <script setup>
 
-const props = defineProps({
+defineProps({
   attribution: {
     type: Object,
     default: () => ({})

src/components/Gallery/ImageViewer.vue

@@ -4,7 +4,7 @@
     @click="emit('close')"
   >
     <div 
-      class="container bg-white dark:bg-gray-800 relative max-h-full w-full md:h-auto rounded-lg shadow-sm"
+      class="container bg-white dark:bg-zinc-900 relative max-h-full w-full md:h-auto rounded-lg shadow-sm"
       @click.stop
     >
       <VSpinner v-if="isLoading" />
@@ -17,7 +17,7 @@
         >
       </div>
 
-      <div class="bg-white dark:bg-gray-800 attributions bottom-0 h-24 p-4 rounded-b-lg align-middle flex justify-between flex-col text-center">
+      <div class="bg-white dark:bg-zinc-900 attributions bottom-0 h-24 p-4 rounded-b-lg align-middle flex justify-between flex-col text-center">
         <ImageDepictions
           class="my-auto"
           :depictions="image.depictions" 

src/components/Layout/LayoutHeader.vue

@@ -8,8 +8,8 @@
       py-2.5
       rounded
       border-b
-      dark:border-b-gray-800
-      dark:bg-gray-800/50
+      dark:border-b-zinc-800
+      dark:bg-zinc-900
       pl-4
       pr-4
       h-9

src/modules/otus/views/Index.vue

@@ -3,9 +3,9 @@
     <div 
       class="
       bg-white
-      dark:bg-gray-800
+      dark:bg-zinc-900
       dark:text-slate-400
-      dark:border-b-gray-800
+      dark:border-b-zinc-800
         border-b 
         pl-4 
         pr-4"