fix dark mode in admin pages

Replace hardcoded zinc/white Tailwind colors with DaisyUI semantic
colors (base-content, base-200, etc.) that adapt to light/dark themes.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

lib/simpleshop_theme_web/live/admin/order_show.ex

@@ -262,10 +262,12 @@ defmodule SimpleshopThemeWeb.Admin.OrderShow do
           {"bg-red-50", "text-red-700", "ring-red-600/20", "hero-x-circle-mini"}
 
         "cancelled" ->
-          {"bg-zinc-50", "text-zinc-600", "ring-zinc-500/10", "hero-no-symbol-mini"}
+          {"bg-base-200/50", "text-base-content/60", "ring-base-content/10",
+           "hero-no-symbol-mini"}
 
         _ ->
-          {"bg-zinc-50", "text-zinc-600", "ring-zinc-500/10", "hero-minus-circle-mini"}
+          {"bg-base-200/50", "text-base-content/60", "ring-base-content/10",
+           "hero-minus-circle-mini"}
       end
 
     assigns = assign(assigns, bg: bg, text: text, ring: ring, icon: icon)
@@ -295,10 +297,12 @@ defmodule SimpleshopThemeWeb.Admin.OrderShow do
           {"bg-red-50", "text-red-700", "ring-red-600/20", "hero-x-circle-mini"}
 
         "refunded" ->
-          {"bg-zinc-50", "text-zinc-600", "ring-zinc-500/10", "hero-arrow-uturn-left-mini"}
+          {"bg-base-200/50", "text-base-content/60", "ring-base-content/10",
+           "hero-arrow-uturn-left-mini"}
 
         _ ->
-          {"bg-zinc-50", "text-zinc-600", "ring-zinc-500/10", "hero-question-mark-circle-mini"}
+          {"bg-base-200/50", "text-base-content/60", "ring-base-content/10",
+           "hero-question-mark-circle-mini"}
       end
 
     assigns = assign(assigns, bg: bg, text: text, ring: ring, icon: icon)

lib/simpleshop_theme_web/live/admin/orders.ex

@@ -133,10 +133,12 @@ defmodule SimpleshopThemeWeb.Admin.Orders do
           {"bg-red-50", "text-red-700", "ring-red-600/20", "hero-x-circle-mini"}
 
         "refunded" ->
-          {"bg-zinc-50", "text-zinc-600", "ring-zinc-500/10", "hero-arrow-uturn-left-mini"}
+          {"bg-base-200/50", "text-base-content/60", "ring-base-content/10",
+           "hero-arrow-uturn-left-mini"}
 
         _ ->
-          {"bg-zinc-50", "text-zinc-600", "ring-zinc-500/10", "hero-question-mark-circle-mini"}
+          {"bg-base-200/50", "text-base-content/60", "ring-base-content/10",
+           "hero-question-mark-circle-mini"}
       end
 
     assigns = assign(assigns, bg: bg, text: text, ring: ring, icon: icon)
@@ -176,10 +178,12 @@ defmodule SimpleshopThemeWeb.Admin.Orders do
           {"bg-red-50", "text-red-700", "ring-red-600/20", "hero-x-circle-mini"}
 
         "cancelled" ->
-          {"bg-zinc-50", "text-zinc-600", "ring-zinc-500/10", "hero-no-symbol-mini"}
+          {"bg-base-200/50", "text-base-content/60", "ring-base-content/10",
+           "hero-no-symbol-mini"}
 
         _ ->
-          {"bg-zinc-50", "text-zinc-600", "ring-zinc-500/10", "hero-minus-circle-mini"}
+          {"bg-base-200/50", "text-base-content/60", "ring-base-content/10",
+           "hero-minus-circle-mini"}
       end
 
     assigns = assign(assigns, bg: bg, text: text, ring: ring, icon: icon)

lib/simpleshop_theme_web/live/admin/settings.ex

@@ -275,7 +275,7 @@ defmodule SimpleshopThemeWeb.Admin.Settings do
             <.status_pill color="zinc">Offline</.status_pill>
           <% end %>
         </div>
-        <p class="mt-2 text-sm text-zinc-600">
+        <p class="mt-2 text-sm text-base-content/60">
           <%= if @site_live do %>
             Your shop is visible to the public.
           <% else %>
@@ -288,7 +288,7 @@ defmodule SimpleshopThemeWeb.Admin.Settings do
             class={[
               "inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-semibold shadow-xs",
               if(@site_live,
-                do: "bg-zinc-100 text-zinc-700 hover:bg-zinc-200 ring-1 ring-zinc-300 ring-inset",
+                do: "bg-base-200 text-base-content hover:bg-base-300 ring-1 ring-base-300 ring-inset",
                 else: "bg-green-600 text-white hover:bg-green-500"
               )
             ]}
@@ -352,13 +352,13 @@ defmodule SimpleshopThemeWeb.Admin.Settings do
           <.printify_connected printify={@printify} />
         <% else %>
           <div class="mt-4">
-            <p class="text-sm text-zinc-600">
+            <p class="text-sm text-base-content/60">
               Connect a print-on-demand provider to import products into your shop.
             </p>
             <div class="mt-4">
               <.link
                 navigate={~p"/admin/providers/new"}
-                class="inline-flex items-center gap-2 rounded-md bg-zinc-900 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-zinc-700"
+                class="inline-flex items-center gap-2 rounded-md bg-base-content px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-base-content/80"
               >
                 <.icon name="hero-plus-mini" class="size-4" /> Connect to Printify
               </.link>
@@ -390,7 +390,7 @@ defmodule SimpleshopThemeWeb.Admin.Settings do
             </div>
           </.form>
 
-          <div class="border-t border-zinc-200 pt-6">
+          <div class="border-t border-base-200 pt-6">
             <.form
               for={@password_form}
               id="password_form"
@@ -433,10 +433,13 @@ defmodule SimpleshopThemeWeb.Admin.Settings do
         <h2 class="text-lg font-semibold">Advanced</h2>
 
         <div class="mt-4 flex flex-col gap-2">
-          <.link href={~p"/admin/dashboard"} class="text-sm text-zinc-600 hover:text-zinc-900">
+          <.link
+            href={~p"/admin/dashboard"}
+            class="text-sm text-base-content/60 hover:text-base-content"
+          >
             <.icon name="hero-chart-bar" class="size-4 inline" /> System dashboard
           </.link>
-          <.link href={~p"/admin/errors"} class="text-sm text-zinc-600 hover:text-zinc-900">
+          <.link href={~p"/admin/errors"} class="text-sm text-base-content/60 hover:text-base-content">
             <.icon name="hero-bug-ant" class="size-4 inline" /> Error tracker
           </.link>
         </div>
@@ -455,8 +458,8 @@ defmodule SimpleshopThemeWeb.Admin.Settings do
       case assigns.color do
         "green" -> "bg-green-50 text-green-700 ring-green-600/20"
         "amber" -> "bg-amber-50 text-amber-700 ring-amber-600/20"
-        "zinc" -> "bg-zinc-50 text-zinc-600 ring-zinc-500/10"
-        _ -> "bg-zinc-50 text-zinc-600 ring-zinc-500/10"
+        "zinc" -> "bg-base-200/50 text-base-content/60 ring-base-content/10"
+        _ -> "bg-base-200/50 text-base-content/60 ring-base-content/10"
       end
 
     assigns = assign(assigns, :classes, classes)
@@ -486,20 +489,20 @@ defmodule SimpleshopThemeWeb.Admin.Settings do
     <div class="mt-4">
       <dl class="text-sm">
         <div class="flex gap-2 py-1">
-          <dt class="text-zinc-500 w-28 shrink-0">Provider</dt>
-          <dd class="text-zinc-700">Printify</dd>
+          <dt class="text-base-content/60 w-28 shrink-0">Provider</dt>
+          <dd class="text-base-content">Printify</dd>
         </div>
         <div class="flex gap-2 py-1">
-          <dt class="text-zinc-500 w-28 shrink-0">Shop</dt>
-          <dd class="text-zinc-700">{@connection.name}</dd>
+          <dt class="text-base-content/60 w-28 shrink-0">Shop</dt>
+          <dd class="text-base-content">{@connection.name}</dd>
         </div>
         <div class="flex gap-2 py-1">
-          <dt class="text-zinc-500 w-28 shrink-0">Products</dt>
-          <dd class="text-zinc-700">{@product_count}</dd>
+          <dt class="text-base-content/60 w-28 shrink-0">Products</dt>
+          <dd class="text-base-content">{@product_count}</dd>
         </div>
         <div class="flex gap-2 py-1">
-          <dt class="text-zinc-500 w-28 shrink-0">Last synced</dt>
-          <dd class="text-zinc-700">
+          <dt class="text-base-content/60 w-28 shrink-0">Last synced</dt>
+          <dd class="text-base-content">
             <%= if @connection.last_synced_at do %>
               {format_relative_time(@connection.last_synced_at)}
             <% else %>
@@ -514,7 +517,7 @@ defmodule SimpleshopThemeWeb.Admin.Settings do
           phx-click="sync"
           phx-value-id={@connection.id}
           disabled={@syncing}
-          class="inline-flex items-center gap-1.5 rounded-md bg-zinc-100 px-3 py-1.5 text-sm font-medium text-zinc-700 hover:bg-zinc-200 ring-1 ring-zinc-300 ring-inset"
+          class="inline-flex items-center gap-1.5 rounded-md bg-base-200 px-3 py-1.5 text-sm font-medium text-base-content hover:bg-base-300 ring-1 ring-base-300 ring-inset"
         >
           <.icon
             name="hero-arrow-path"
@@ -524,7 +527,7 @@ defmodule SimpleshopThemeWeb.Admin.Settings do
         </button>
         <.link
           navigate={~p"/admin/providers/#{@connection.id}/edit"}
-          class="inline-flex items-center gap-1.5 rounded-md bg-zinc-100 px-3 py-1.5 text-sm font-medium text-zinc-700 hover:bg-zinc-200 ring-1 ring-zinc-300 ring-inset"
+          class="inline-flex items-center gap-1.5 rounded-md bg-base-200 px-3 py-1.5 text-sm font-medium text-base-content hover:bg-base-300 ring-1 ring-base-300 ring-inset"
         >
           <.icon name="hero-cog-6-tooth" class="size-4" /> Settings
         </.link>
@@ -544,14 +547,14 @@ defmodule SimpleshopThemeWeb.Admin.Settings do
   defp stripe_setup_form(assigns) do
     ~H"""
     <div class="mt-4">
-      <p class="text-sm text-zinc-600">
+      <p class="text-sm text-base-content/60">
         To accept payments, connect your Stripe account by entering your secret key.
         You can find it in your
         <a
           href="https://dashboard.stripe.com/apikeys"
           target="_blank"
           rel="noopener"
-          class="text-zinc-900 underline"
+          class="text-base-content underline"
         >
           Stripe dashboard
         </a>
@@ -566,7 +569,7 @@ defmodule SimpleshopThemeWeb.Admin.Settings do
           autocomplete="off"
           placeholder="sk_test_... or sk_live_..."
         />
-        <p class="text-xs text-zinc-500 mt-1">
+        <p class="text-xs text-base-content/60 mt-1">
           Starts with <code>sk_test_</code> (test mode) or <code>sk_live_</code> (live mode).
           This key is encrypted at rest in the database.
         </p>
@@ -585,18 +588,18 @@ defmodule SimpleshopThemeWeb.Admin.Settings do
     <div class="mt-4 space-y-4">
       <dl class="text-sm">
         <div class="flex gap-2 py-1">
-          <dt class="text-zinc-500 w-28 shrink-0">API key</dt>
-          <dd><code class="text-zinc-700">{@stripe_api_key_hint}</code></dd>
+          <dt class="text-base-content/60 w-28 shrink-0">API key</dt>
+          <dd><code class="text-base-content">{@stripe_api_key_hint}</code></dd>
         </div>
         <div class="flex gap-2 py-1">
-          <dt class="text-zinc-500 w-28 shrink-0">Webhook URL</dt>
-          <dd><code class="text-zinc-700 text-xs break-all">{@stripe_webhook_url}</code></dd>
+          <dt class="text-base-content/60 w-28 shrink-0">Webhook URL</dt>
+          <dd><code class="text-base-content text-xs break-all">{@stripe_webhook_url}</code></dd>
         </div>
         <div class="flex gap-2 py-1">
-          <dt class="text-zinc-500 w-28 shrink-0">Webhook secret</dt>
+          <dt class="text-base-content/60 w-28 shrink-0">Webhook secret</dt>
           <dd>
             <%= if @stripe_has_signing_secret do %>
-              <code class="text-zinc-700">{@stripe_signing_secret_hint}</code>
+              <code class="text-base-content">{@stripe_signing_secret_hint}</code>
             <% else %>
               <span class="text-amber-600">Not set</span>
             <% end %>
@@ -628,10 +631,10 @@ defmodule SimpleshopThemeWeb.Admin.Settings do
           </div>
         </.form>
       <% else %>
-        <div class="border-t border-zinc-200 pt-3">
+        <div class="border-t border-base-200 pt-3">
           <button
             phx-click="toggle_stripe_advanced"
-            class="flex items-center gap-1 text-sm text-zinc-500 hover:text-zinc-700"
+            class="flex items-center gap-1 text-sm text-base-content/60 hover:text-base-content"
           >
             <.icon
               name={if @advanced_open, do: "hero-chevron-down-mini", else: "hero-chevron-right-mini"}
@@ -641,7 +644,7 @@ defmodule SimpleshopThemeWeb.Admin.Settings do
 
           <%= if @advanced_open do %>
             <div class="mt-3">
-              <p class="text-xs text-zinc-500 mb-3">
+              <p class="text-xs text-base-content/60 mb-3">
                 Override the webhook signing secret if you need to use a custom endpoint or the Stripe CLI.
               </p>
               <.form for={@secret_form} phx-submit="save_signing_secret">
@@ -661,7 +664,7 @@ defmodule SimpleshopThemeWeb.Admin.Settings do
         </div>
       <% end %>
 
-      <div class="border-t border-zinc-200 pt-4">
+      <div class="border-t border-base-200 pt-4">
         <button
           phx-click="disconnect_stripe"
           data-confirm="This will remove your Stripe API key and delete the webhook endpoint. Are you sure?"