[5.x] Improve Asset Fieldtype Dark Mode UI (#10388)

Improve Asset Fieldtype Dark Mode UI
statamic · Jul 3, 2024 · 72aaa00 · 72aaa00
1 parent 0ae550c
commit 72aaa00
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/resources/css/components/assets.css b/resources/css/components/assets.css
@@ -27,6 +27,11 @@
     pointer-events: none;
     z-index: 1049;
     background: rgba(255, 255, 255, .9);
+
+    .dark & {
+        @apply bg-dark-900/90;
+        border-color: theme('colors.dark.600');
+    }
 }
 
 
@@ -93,7 +98,7 @@
    ========================================================================== */
 
 .asset-tile {
-    @apply bg-white dark:bg-dark-500 relative min-w-0 flex items-center flex-col justify-between cursor-pointer border rounded dark:border-dark-200;
+    @apply bg-white dark:bg-dark-600 relative min-w-0 flex items-center flex-col justify-between cursor-pointer border rounded dark:border-dark-300;
 
     .asset-thumb {
         @apply flex justify-center items-center w-full h-full rounded;
@@ -115,6 +120,10 @@
         @apply border-t dark:border-dark-200 w-full text-2xs text-gray-700 dark:text-dark-100;
     }
 
+    .asset-meta-btn {
+        @apply text-blue rtl:border-r ltr:border-l px-2 py-1 hover:bg-gray-200 dark:hover:bg-dark-800 dark:border-dark-300;
+    }
+
     .asset-filename {
         @apply truncate;
     }

diff --git a/resources/js/components/fieldtypes/assets/AssetTile.vue b/resources/js/components/fieldtypes/assets/AssetTile.vue
@@ -81,7 +81,7 @@
                 {{ label }}
             </div>
             <button
-                class="text-blue rtl:border-r ltr:border-l px-2 py-1 hover:bg-gray-200"
+                class="asset-meta-btn"
                 @click="edit"
                 v-if="showSetAlt && needsAlt"
             >