fix bugs and add Statamic 5.3 dark mode support

dist/build/manifest.json

@@ -1,11 +1,11 @@
 {
   "resources/css/iconify-fieldtype.css": {
-    "file": "assets/iconify-fieldtype-8d61333d.css",
+    "file": "assets/iconify-fieldtype-2a48adc0.css",
     "isEntry": true,
     "src": "resources/css/iconify-fieldtype.css"
   },
   "resources/js/iconify-fieldtype.js": {
-    "file": "assets/iconify-fieldtype-dc08a25e.js",
+    "file": "assets/iconify-fieldtype-a6540ba7.js",
     "isEntry": true,
     "src": "resources/js/iconify-fieldtype.js"
   }

package.json

@@ -11,7 +11,7 @@
         "ky": "^0.33.3",
         "laravel-vite-plugin": "^0.7.2",
         "postcss": "^8.4.23",
-        "tailwindcss": "^3.3.2",
+        "tailwindcss": "^3.4.3",
         "vite": "^4.0.0"
     }
 }

resources/js/compontents/IconifyFieldtype.vue

@@ -4,9 +4,9 @@
         <div v-if="value" class="iconify-flex iconify-items-center iconify-gap-4">
             <dropdown-list placement="bottom-center">
                 <template #trigger>
-                    <iconify-icon v-if="typeof value === 'string'" :icon="value" class="iconify-cursor-pointer iconify-text-4xl iconify-text-gray-800" v-tooltip="{content: value, delay: 500, autoHide: false}"></iconify-icon>
+                    <iconify-icon v-if="typeof value === 'string'" :icon="value" class="iconify-cursor-pointer iconify-text-4xl" v-tooltip="{content: value, delay: 500, autoHide: false}"></iconify-icon>
 
-                    <svg v-else v-bind="value.attributes" class="iconify-cursor-pointer iconify-text-4xl iconify-text-gray-800" v-html="value.body" v-tooltip="{content: value.name, delay: 500, autoHide: false}"></svg>
+                    <svg v-else v-bind="value.attributes" class="iconify-cursor-pointer iconify-text-4xl" v-html="value.body" v-tooltip="{content: value.name, delay: 500, autoHide: false}"></svg>
                 </template>
                 <dropdown-item text="Change" @click="openSearchModal" />
                 <dropdown-item text="Remove" @click="update(null)" />
@@ -19,9 +19,9 @@
             v-if="searchModalIsOpen"
             @closed="searchModalIsOpen = false"
         >
-            <div slot-scope="{ close }" class="iconify-flex iconify-flex-col iconify-h-full iconify-bg-white">
+            <div slot-scope="{ close }" class="iconify-flex iconify-flex-col iconify-h-full iconify-bg-white dark:bg-dark-800">
 
-                <header class="flex items-center sticky top-0 inset-x-0 bg-white shadow px-8 py-2 z-1 h-13">
+                <header class="flex items-center sticky top-0 inset-x-0 bg-white dark:bg-dark-550 shadow dark:shadow-dark px-8 py-2 z-1 h-13">
                     <h1 class="flex-1 flex items-center text-xl">
                         Search and select an icon
                     </h1>
@@ -57,7 +57,7 @@
                             <tbody>
                                 <tr v-for="icon in icons">
                                     <td>
-                                        <iconify-icon :icon="icon.name" class="iconify-text-2xl iconify-text-gray-800"></iconify-icon>
+                                        <iconify-icon :icon="icon.name" class="iconify-text-2xl"></iconify-icon>
                                     </td>
                                     <td>
                                         <span v-text="icon.name" class="iconify-text-sm"></span>
@@ -77,9 +77,9 @@
 
                         <div v-if="listType === 'grid'" class="iconify-grid iconify-grid-cols-8 iconify-gap-4">
 
-                            <button v-for="icon in icons" class="iconify-relative iconify-aspect-square iconify-bg-gray-100 iconify-rounded-lg iconify-flex iconify-items-center iconify-justify-center iconify-group" @click="select(icon)">
+                            <button v-for="icon in icons" class="iconify-relative iconify-aspect-square iconify-bg-gray-100 dark:bg-dark-550 iconify-rounded-lg iconify-flex iconify-items-center iconify-justify-center iconify-group" @click="select(icon)">
 
-                                <iconify-icon :icon="icon.name" class="iconify-text-4xl iconify-text-gray-800 group-hover:iconify-scale-125 iconify-transition-all"></iconify-icon>
+                                <iconify-icon :icon="icon.name" class="iconify-text-4xl iconify-text-gray-800 dark:iconify-text-white group-hover:iconify-scale-125 iconify-transition-all"></iconify-icon>
 
                                 <div class="iconify-absolute iconify-bottom-0 iconify-left-0 iconify-right-0 iconify-p-2 iconify-bg-gray-50 iconify-text-xs iconify-text-gray-500 iconify-text-center iconify-rounded-b-lg iconify-opacity-0 group-hover:iconify-opacity-100 iconify-transition-opacity">
                                     <span v-text="icon.name"></span>

tailwind.config.js

@@ -1,5 +1,6 @@
 module.exports = {
   prefix: 'iconify-',
+  darkMode: ['selector', 'html[class*="dark"]'],
   content: [
     './resources/**/*.vue',
     './resources/**/*.js',