Update part of colours for import component

lib/music_library_web/components/core_components.ex

@@ -50,7 +50,11 @@ defmodule MusicLibraryWeb.CoreComponents do
       data-cancel={JS.exec(@on_cancel, "phx-remove")}
       class="relative z-50 hidden"
     >
-      <div id={"#{@id}-bg"} class="bg-zinc-50/90 fixed inset-0 transition-opacity" aria-hidden="true" />
+      <div
+        id={"#{@id}-bg"}
+        class="bg-zinc-50/90 dark:bg-zinc-600/80 fixed inset-0 transition-opacity"
+        aria-hidden="true"
+      />
       <div
         class="fixed inset-0 overflow-y-auto"
         aria-labelledby={"#{@id}-title"}
@@ -66,13 +70,18 @@ defmodule MusicLibraryWeb.CoreComponents do
               phx-window-keydown={JS.exec("data-cancel", to: "##{@id}")}
               phx-key="escape"
               phx-click-away={JS.exec("data-cancel", to: "##{@id}")}
-              class="shadow-zinc-700/10 ring-zinc-700/10 relative hidden rounded-2xl bg-white p-14 shadow-lg ring-1 transition"
+              class={[
+                "shadow-zinc-700/10 ring-zinc-700/10",
+                "relative hidden rounded-2xl",
+                "bg-white dark:bg-zinc-800",
+                "p-14 shadow-lg ring-1 transition"
+              ]}
             >
               <div class="absolute top-6 right-5">
                 <button
                   phx-click={JS.exec("data-cancel", to: "##{@id}")}
                   type="button"
-                  class="-m-3 flex-none p-3 opacity-20 hover:opacity-40 bg-gray-50"
+                  class="-m-3 flex-none p-3 opacity-40 hover:opacity-80 bg-gray-50 dark:bg-zinc-800 dark:text-zinc-50"
                   aria-label={gettext("close")}
                 >
                   <.icon name="hero-x-mark-solid" class="h-5 w-5" />
@@ -202,7 +211,7 @@ defmodule MusicLibraryWeb.CoreComponents do
   def simple_form(assigns) do
     ~H"""
     <.form :let={f} for={@for} as={@as} {@rest}>
-      <div class="mt-10 space-y-8 bg-white">
+      <div class="mt-10 space-y-8 bg-white dark:bg-zinc-800">
         <%= render_slot(@inner_block, f) %>
         <div :for={action <- @actions} class="mt-2 flex items-center justify-between gap-6">
           <%= render_slot(action, f) %>
@@ -380,7 +389,13 @@ defmodule MusicLibraryWeb.CoreComponents do
         id={@id}
         value={Phoenix.HTML.Form.normalize_value(@type, @value)}
         class={[
-          "mt-2 block w-full rounded-lg text-zinc-900 focus:ring-0 sm:text-sm sm:leading-6",
+          "mt-2 block w-full rounded-md text-zinc-900 focus:ring-0 sm:text-sm sm:leading-6",
+          "ring-1 ring-inset focus:z-10 focus:ring-2 focus:ring-inset",
+          "text-gray-900 dark:text-gray-200",
+          "dark:bg-zinc-700",
+          "ring-gray-200 dark:ring-gray-400",
+          "placeholder:text-gray-400 dark:placeholder:text-gray-400",
+          "focus:ring-zinc-400 dark:focus:ring-zinc-300",
           @errors == [] && "border-zinc-300 focus:border-zinc-400",
           @errors != [] && "border-rose-400 focus:border-rose-400"
         ]}
@@ -399,7 +414,7 @@ defmodule MusicLibraryWeb.CoreComponents do
 
   def label(assigns) do
     ~H"""
-    <label for={@for} class="block text-sm font-semibold leading-6 text-zinc-800">
+    <label for={@for} class="block text-sm font-semibold leading-6 text-zinc-800 dark:text-zinc-400">
       <%= render_slot(@inner_block) %>
     </label>
     """

lib/music_library_web/live/record_live/import_component.ex

@@ -29,7 +29,7 @@ defmodule MusicLibraryWeb.RecordLive.ImportComponent do
       </ul>
       <div
         :if={@release_groups == []}
-        class="flex items-center justify-center h-32 text-sm text-gray-500"
+        class="flex items-center justify-center h-32 text-md text-zinc-500"
       >
         <%= gettext("No results") %>
       </div>