Update image viewer for light theme

wbbaker · Aug 9, 2022 · 6539225 · 6539225
1 parent a08c325
commit 6539225
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 6 deletions.
diff --git a/src/components/ImageViewer/ImageToolbar.vue b/src/components/ImageViewer/ImageToolbar.vue
@@ -5,7 +5,7 @@
     </div>
     <button
       type="button"
-      class="p-2 cursor-pointer text-white opacity-50 "
+      class="p-2 cursor-pointer text-black dark:text-white opacity-50"
     >
       <IconClose />
     </button>

diff --git a/src/components/ImageViewer/ImageViewer.global.vue b/src/components/ImageViewer/ImageViewer.global.vue
@@ -1,13 +1,13 @@
 <template>
   <div 
-    class="fixed z-[10000] h-full bg-opacity-90 bg-black overflow-y-hidden overflow-x-hidden w-full top-0 left-0 flex flex-col items-center justify-center backdrop-blur-md"
+    class="fixed z-[10000] h-full bg-white overflow-y-hidden overflow-x-hidden w-full top-0 left-0 flex flex-col items-center justify-center backdrop-blur-md dark:bg-black"
     @click="emit('close')"
   >
     <div 
       class="min-w-96 dark:bg-slate-900 rounded-lg shadow-sm mb-24"
       @click.stop
     >
-      <div class="absolute rounded-t-lg w-auto max-h-full h-auto top-12 bottom-40 left-0 right-0 flex justify-center align-middle">
+      <div class="absolute rounded-t-lg w-auto max-h-full h-auto top-12 bottom-44 left-0 right-0 flex justify-center align-middle">
         <VSpinner v-if="isLoading" />
         <img
           ref="imageElement"
@@ -31,7 +31,8 @@
     <div class="bottom-0 fixed max-w-full w-full">
       <div 
         class="
-        text-white
+        text-black
+        dark:text-white
         text-sm
         attributions
         p-6
@@ -40,7 +41,7 @@
         justify-between
         flex-col
         text-center
-        [text-shadow:0_1px_5px_rgba(0,0,0,1)]
+        dark:[text-shadow:0_1px_5px_rgba(0,0,0,1)]
       "
       >
         <ImageDepictions

diff --git a/src/components/ImageViewer/ImageViewerCounter.vue b/src/components/ImageViewer/ImageViewerCounter.vue
@@ -1,5 +1,5 @@
 <template>
-  <span class="p-2 text-white opacity-50">{{ currentImage + 1 }}/{{ totalImages }}</span>
+  <span class="p-2 text-black dark:text-white opacity-50">{{ currentImage + 1 }}/{{ totalImages }}</span>
 </template>
 
 <script setup>