fix: dark mode input focus

unfoldadmin · May 21, 2023 · 64986a6 · 64986a6
1 parent a356aee
commit 64986a6
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 4 deletions.
diff --git a/src/unfold/static/unfold/css/styles.css b/src/unfold/static/unfold/css/styles.css
diff --git a/src/unfold/templates/admin/search_form.html b/src/unfold/templates/admin/search_form.html
@@ -3,7 +3,7 @@
 {% if cl.search_fields %}
     <div id="toolbar" class="mb-3 md:mb-0 md:mr-4 lg:w-72">
         <div>
-            <div class="bg-white border flex rounded-md overflow-hidden shadow-sm focus-within:ring focus-within:ring-primary-300 focus-within:border-primary-600 dark:bg-gray-900 dark:border-gray-700 dark:focus-within:ring-primary-600/30">
+            <div class="bg-white border flex rounded-md overflow-hidden shadow-sm focus-within:ring focus-within:ring-primary-300 focus-within:border-primary-600 dark:bg-gray-900 dark:border-gray-700 dark:focus-within:border-primary-600 dark:focus-within:ring-primary-700 dark:focus-within:ring-opacity-50">
                 <input class="font-medium h-9 px-3 text-gray-500 text-sm w-40 lg:w-60 focus:outline-none dark:bg-gray-900 dark:text-gray-400" type="text" name="{{ search_var }}" value="{{ cl.query }}" id="searchbar" autofocus placeholder="{% trans 'Type to search' %}" />
 
                 <button type="submit" class="flex items-center ml-auto px-2 focus:outline-none" id="searchbar-submit">

diff --git a/src/unfold/templates/unfold/helpers/search.html b/src/unfold/templates/unfold/helpers/search.html
@@ -1,7 +1,7 @@
 {% load i18n %}
 {% if sidebar_show_search %}
     <div class="mb-5 mx-3 relative">
-        <div class="bg-white border flex items-center overflow-hidden rounded-md shadow-sm focus-within:ring focus-within:ring-primary-300 focus-within:border-primary-600 dark:bg-gray-900 dark:border-gray-700 focus-within:dark:ring-primary-600/30">
+        <div class="bg-white border flex items-center overflow-hidden rounded-md shadow-sm focus-within:ring focus-within:ring-primary-300 focus-within:border-primary-600 dark:bg-gray-900 dark:border-gray-700 dark:focus-within:border-primary-600 dark:focus-within:ring-primary-700 dark:focus-within:ring-opacity-50">
             <span class="material-symbols-outlined md-18 pl-3 text-gray-400">manage_search</span>
 
             <input type="search"

diff --git a/src/unfold/widgets.py b/src/unfold/widgets.py
@@ -51,7 +51,9 @@
     "dark:bg-gray-900",
     "dark:border-gray-700",
     "dark:text-gray-400",
-    "dark:focus:ring-primary-600/30",
+    "dark:focus:border-primary-600",
+    "dark:focus:ring-primary-700",
+    "dark:focus:ring-opacity-50",
     "dark:group-[.errors]:border-red-500",
     "dark:group-[.errors]:focus:ring-red-600/40",
 ]