From 72aaa005e36f6a62f29ef322b18b038671948db2 Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Wed, 3 Jul 2024 15:43:14 -0400
Subject: [PATCH] [5.x] Improve Asset Fieldtype Dark Mode UI (#10388)

Improve Asset Fieldtype Dark Mode UI
---
 resources/css/components/assets.css                   | 11 ++++++++++-
 .../js/components/fieldtypes/assets/AssetTile.vue     |  2 +-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/resources/css/components/assets.css b/resources/css/components/assets.css
index bad7e1f88e..1203e7e093 100644
--- 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
index 24d6bc8881..7b65e41172 100644
--- 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"
             >