fix: default dark mode css classes

unfoldadmin · Jan 18, 2023 · 9d798c0 · 9d798c0
1 parent e70a9b0
commit 9d798c0
Show file tree

Hide file tree

Showing 14 changed files with 33 additions and 32 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/base.html b/src/unfold/templates/admin/base.html
@@ -13,7 +13,7 @@
         <div id="main" class="flex-grow">
             {% if not is_popup %}
                 {% block header %}
-                    <div class="border-b mb-6 px-4 lg:px-12 dark:border-gray-800">
+                    <div class="border-b border-gray-200 mb-6 px-4 lg:px-12 dark:border-gray-800">
                         <div class="container flex items-center h-16 mx-auto py-4">
                             <div id="header-inner" class="flex items-center w-full">
                                 <div class="flex items-center w-full">

diff --git a/src/unfold/templates/admin/change_list_results.html b/src/unfold/templates/admin/change_list_results.html
@@ -7,7 +7,7 @@
 {% endif %}
 
 {% if results %}
-    <table id="result_list" class="border-spacing-none border-separate text-gray-700 w-full lg:border lg:rounded-md lg:shadow-sm lg:dark:border-gray-800">
+    <table id="result_list" class="border-gray-200 border-spacing-none border-separate text-gray-700 w-full dark:text-gray-400 lg:border lg:rounded-md lg:shadow-sm lg:dark:border-gray-800">
         <thead class="hidden lg:table-header-group">
             <tr>
                 {% for header in result_headers %}

diff --git a/src/unfold/templates/admin/delete_confirmation.html b/src/unfold/templates/admin/delete_confirmation.html
@@ -32,12 +32,12 @@
 
 {% block content %}
     {% if perms_lacking %}
-        <div class="border rounded-md shadow-sm dark:border-gray-800">
+        <div class="border border-gray-200 rounded-md shadow-sm dark:border-gray-800">
             <p class="font-medium p-4 text-sm">
                 {% blocktranslate with escaped_object=object %}Deleting the {{ object_name }} '{{ escaped_object }}' would result in deleting related objects, but your account doesn't have permission to delete the following types of objects:{% endblocktranslate %}
             </p>
 
-            <div class="border-t p-4 dark:border-gray-800">
+            <div class="border-gray-200 border-t p-4 dark:border-gray-800">
                 <ul class="leading-relaxed text-gray-500 text-sm dark:text-gray-400">
                     {% for obj in perms_lacking %}
                         <li>
@@ -48,12 +48,12 @@
             </div>
         </div>
     {% elif protected %}
-        <div class="border rounded-md shadow-sm dark:border-gray-800">
+        <div class="border border-gray-200 rounded-md shadow-sm dark:border-gray-800">
             <p class="font-medium p-4 text-sm">
                 {% blocktranslate with escaped_object=object %}Deleting the {{ object_name }} '{{ escaped_object }}' would require deleting the following protected related objects:{% endblocktranslate %}
             </p>
 
-            <div class="border-t p-4 dark:border-gray-800">
+            <div class="bborder-gray-200  order-t p-4 dark:border-gray-800">
                 <ul class="leading-relaxed text-gray-500 text-sm dark:text-gray-400">
                     {% for obj in protected %}
                         <li>
@@ -64,14 +64,14 @@
             </div>
         </div>
     {% else %}
-        <div class="border rounded-md shadow-sm dark:border-gray-800">
+        <div class="border border-gray-200 rounded-md shadow-sm dark:border-gray-800">
             <p class="font-medium p-4 text-sm">
                 {% blocktranslate with escaped_object=object %}Are you sure you want to delete the {{ object_name }} "{{ escaped_object }}"? All of the following related items will be deleted:{% endblocktranslate %}
             </p>
 
             {% include "admin/includes/object_delete_summary.html" %}
 
-            <div class="border-t p-4 dark:border-gray-800">
+            <div class="border-gray-200  border-t p-4 dark:border-gray-800">
                 <h2 class="font-medium mb-2 text-sm">
                     {% translate "Objects" %}
                 </h2>
@@ -81,7 +81,7 @@ <h2 class="font-medium mb-2 text-sm">
                 </ul>
             </div>
 
-            <form method="post" class="border-t px-4 py-3 dark:border-gray-800">
+            <form method="post" class="border-gray-200 border-t px-4 py-3 dark:border-gray-800">
                 {% csrf_token %}
 
                 <div class="flex items-center">

diff --git a/src/unfold/templates/admin/delete_selected_confirmation.html b/src/unfold/templates/admin/delete_selected_confirmation.html
@@ -37,20 +37,20 @@
             {% blocktranslate %}Deleting the selected {{ objects_name }} would result in deleting related objects, but your account doesn't have permission to delete the following types of objects:{% endblocktranslate %}
         </p>
 
-        <div class="border-t p-4 dark:border-gray-800">
+        <div class="border-t border-gray-200 p-4 dark:border-gray-800">
             <ul class="leading-relaxed text-gray-500 text-sm dark:border-gray-800 dark:text-gray-400">
                 {% for obj in perms_lacking %}
                     <li>{{ obj }}</li>
                 {% endfor %}
             </ul>
         </div>
     {% elif protected %}
-        <div class="border rounded-md shadow-sm dark:border-gray-800">
+        <div class="border border-gray-200 rounded-md shadow-sm dark:border-gray-800">
             <p class="font-medium p-4 text-sm">
                 {% blocktranslate %}Deleting the selected {{ objects_name }} would require deleting the following protected related objects:{% endblocktranslate %}
             </p>
 
-            <div class="border-t p-4 dark:border-gray-800">
+            <div class="border-t border-gray-200 p-4 dark:border-gray-800">
                 <ul class="leading-relaxed text-gray-500 text-sm dark:text-gray-400">
                     {% for obj in protected %}
                         <li>{{ obj }}</li>
@@ -59,14 +59,14 @@
             </div>
         </div>
     {% else %}
-        <div class="border rounded-md shadow-sm dark:border-gray-800">
+        <div class="border border-gray-200 rounded-md shadow-sm dark:border-gray-800">
             <p class="font-medium p-4 text-sm">
                 {% blocktranslate %}Are you sure you want to delete the selected {{ objects_name }}? All of the following objects and their related items will be deleted:{% endblocktranslate %}
             </p>
 
             {% include "admin/includes/object_delete_summary.html" %}
 
-            <div class="border-t p-4 dark:border-gray-800">
+            <div class="border-t border-gray-200 p-4 dark:border-gray-800">
                 <h2 class="font-medium mb-2 text-sm">
                     {% translate "Objects" %}
                 </h2>
@@ -78,7 +78,7 @@ <h2 class="font-medium mb-2 text-sm">
                 {% endfor %}
             </div>
 
-            <form method="post" class="border-t px-4 py-3 dark:border-gray-800">
+            <form method="post" class="border-t border-gray-200 px-4 py-3 dark:border-gray-800">
                 {% csrf_token %}
 
                 <div class="flex items-center">

diff --git a/src/unfold/templates/admin/edit_inline/stacked.html b/src/unfold/templates/admin/edit_inline/stacked.html
@@ -16,7 +16,7 @@ <h2 class="bg-gray-100 border border-transparent font-semibold mb-6 px-4 py-3 ro
         <div class="border mb-6 overflow-hidden rounded-md shadow-sm text-gray-700 w-full dark:border-gray-800">
             {% for inline_admin_form in inline_admin_formset %}
                 <div class="inline-related group inline-stacked {% if inline_admin_form.original or inline_admin_form.show_url %} has_original{% endif %}{% if forloop.last and inline_admin_formset.has_add_permission %} empty-form last-related{% endif %}" id="{{ inline_admin_formset.formset.prefix }}-{% if not forloop.last %}{{ forloop.counter0 }}{% else %}empty{% endif %}">
-                    <h3 class="border-b {% if not forloop.first %}border-t{% endif %} flex font-medium items-center mb-3 px-3 py-2 text-gray-400 text-sm dark:border-gray-800">
+                    <h3 class="border-b {% if not forloop.first %}border-t{% endif %} border-gray-200 flex font-medium items-center mb-3 px-3 py-2 text-gray-400 text-sm dark:border-gray-800">
                         <span class="mr-2">
                             {{ inline_admin_formset.opts.verbose_name|capfirst }}:
                         </span>

diff --git a/src/unfold/templates/admin/edit_inline/tabular.html b/src/unfold/templates/admin/edit_inline/tabular.html
@@ -21,12 +21,12 @@ <h2 class="bg-gray-100 border border-transparent font-semibold mb-6 px-4 py-3 ro
                         {% trans "No records found." %}
                     </p>
                 {% else %}
-                    <table class="border border-spacing-none border-separate mb-6 rounded-md shadow-sm text-gray-700 w-full dark:border-gray-800">
+                    <table class="border border-gray-200 border-spacing-none border-separate mb-6 rounded-md shadow-sm text-gray-700 w-full dark:border-gray-800">
                         <thead class="hidden lg:table-header-group">
                             <tr>
                                 {% for field in inline_admin_formset.fields %}
                                     {% if not field.widget.is_hidden %}
-                                        <th class="column-{{ field.name }}{% if field.required %} required{% endif %} align-middle border-b font-medium px-3 py-2 text-left text-gray-400 text-sm dark:border-gray-800">
+                                        <th class="column-{{ field.name }}{% if field.required %} required{% endif %} align-middle border-b border-gray-200 font-medium px-3 py-2 text-left text-gray-400 text-sm dark:border-gray-800">
                                             <span class="flex flex-row items-center">
                                                 {{ field.label|capfirst }}
 
@@ -39,7 +39,7 @@ <h2 class="bg-gray-100 border border-transparent font-semibold mb-6 px-4 py-3 ro
                                 {% endfor %}
 
                                 {% if inline_admin_formset.formset.can_delete and inline_admin_formset.has_delete_permission %}
-                                    <th class="align-middle border-b font-medium px-3 py-2 text-left text-gray-400 text-sm lg:w-px dark:border-gray-800">
+                                    <th class="align-middle border-b border-gray-200 font-medium px-3 py-2 text-left text-gray-400 text-sm lg:w-px dark:border-gray-800">
                                         {% translate "Delete?" %}
                                     </th>
                                 {% endif %}
@@ -109,7 +109,7 @@ <h2 class="bg-gray-100 border border-transparent font-semibold mb-6 px-4 py-3 ro
                                                 {% with is_last_col=forloop.last %}
                                                     {% for field in line %}
                                                         {% if field.is_readonly or not field.field.is_hidden %}
-                                                            <td{% if field.field.name %} class="field-{{ field.field.name }}{% if field.field.errors|length > 0 %} errors{% endif %}{% if inline_admin_form.original %} p-3 lg:py-3{% else %} py-3{% endif %}{% if field.is_checkbox %} align-middle{% else %} align-top{% endif %} {% if is_last_row and not inline_admin_formset.has_add_permission %}{% if is_last_col %}border-0 {% else %}border-b lg:border-0{% endif %}{% else %}border-b{% endif %} flex items-center before:capitalize before:content-[attr(data-label)] before:mr-auto before:text-gray-500 before:w-72 lg:before:hidden font-normal px-3 text-left text-sm lg:table-cell dark:border-gray-800"{% endif %} data-label="{{ field.field.label }}">
+                                                            <td{% if field.field.name %} class="field-{{ field.field.name }}{% if field.field.errors|length > 0 %} errors{% endif %}{% if inline_admin_form.original %} p-3 lg:py-3{% else %} py-3{% endif %}{% if field.is_checkbox %} align-middle{% else %} align-top{% endif %} {% if is_last_row and not inline_admin_formset.has_add_permission %}{% if is_last_col %}border-0 {% else %}border-b lg:border-0{% endif %}{% else %}border-b{% endif %} border-gray-200 flex items-center before:capitalize before:content-[attr(data-label)] before:mr-auto before:text-gray-500 before:w-72 lg:before:hidden font-normal px-3 text-left text-sm lg:table-cell dark:border-gray-800"{% endif %} data-label="{{ field.field.label }}">
                                                                 {% if field.is_readonly %}
                                                                     <p class="bg-gray-50 border font-medium px-3 py-2 rounded-md shadow-sm text-gray-500 text-sm dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800">
                                                                         {{ field.contents }}
@@ -133,7 +133,7 @@ <h2 class="bg-gray-100 border border-transparent font-semibold mb-6 px-4 py-3 ro
                                         {% endfor %}
 
                                         {% if inline_admin_formset.formset.can_delete and inline_admin_formset.has_delete_permission %}
-                                            <td class="delete {% if inline_admin_form.original %}p-3 lg:py-3{% else %}py-3{% endif %} text-left font-normal px-3 text-sm text-red-600 border-b flex items-center before:capitalize before:content-[attr(data-label)] before:mr-auto before:text-gray-500 before:w-72 lg:before:hidden font-normal px-3 text-sm lg:align-top lg:table-cell lg:underline lg:w-px dark:border-gray-800" data-label="{% trans "Remove" %}">
+                                            <td class="delete {% if inline_admin_form.original %}p-3 lg:py-3{% else %}py-3{% endif %} text-left font-normal px-3 text-sm text-red-600 border-b border-gray-200 flex items-center before:capitalize before:content-[attr(data-label)] before:mr-auto before:text-gray-500 before:w-72 lg:before:hidden font-normal px-3 text-sm lg:align-top lg:table-cell lg:underline lg:w-px dark:border-gray-800" data-label="{% trans "Remove" %}">
                                                 {% if inline_admin_form.original %}
                                                     <div class="flex flex-row lg:mt-3">
                                                         <div class="ml-auto">

diff --git a/src/unfold/templates/admin/includes/fieldset.html b/src/unfold/templates/admin/includes/fieldset.html
@@ -11,7 +11,7 @@ <h2 class="bg-gray-100 border border-transparent font-semibold mb-6 px-4 py-3 ro
         </div>
     {% endif %}
 
-    <div class="aligned border mb-8 rounded-md pt-3 px-3 shadow-sm dark:border-gray-800">
+    <div class="aligned border border-gray-200 mb-8 rounded-md pt-3 px-3 shadow-sm dark:border-gray-800">
         {% for line in fieldset %}
             <div class="block {% if line.fields|length_is:'1' and line.errors %} group errors{% endif %}{% if not line.has_visible_field %} hidden{% endif %}{% for field in line %}{% if field.field.name %} field-{{ field.field.name }}{% endif %}{% endfor %}">
                 {% for field in line %}

diff --git a/src/unfold/templates/admin/includes/object_delete_summary.html b/src/unfold/templates/admin/includes/object_delete_summary.html
@@ -1,6 +1,6 @@
 {% load i18n %}
 
-<div class="border-t p-4 dark:border-gray-800">
+<div class="border-gray-200 border-t p-4 dark:border-gray-800">
     <h2 class="font-medium mb-2 text-sm">
         {% translate "Summary" %}
     </h2>

diff --git a/src/unfold/templates/unfold/helpers/app_list.html b/src/unfold/templates/unfold/helpers/app_list.html
@@ -4,7 +4,7 @@
     <div class="overflow-auto">
         {% for group in sidebar_navigation %}
             {% if group.separator %}
-                <hr class="border-t mx-6 my-2 dark:border-gray-800" />
+                <hr class="border-t border-gray-200 mx-6 my-2 dark:border-gray-800" />
             {% endif %}
 
             {% if group.title %}

diff --git a/src/unfold/templates/unfold/helpers/navigation.html b/src/unfold/templates/unfold/helpers/navigation.html
@@ -1,8 +1,8 @@
 {% load i18n %}
 
 <div class="relative min-w-sidebar transition-width w-sidebar z-30">
-    <nav id="nav-sidebar" class="bg-gray-50 border-r flex flex-col fixed max-h-screen min-h-screen min-w-sidebar transition-width w-sidebar dark:bg-gray-900 dark:border-gray-800">
-        <div class="border-b mb-5 py-3 dark:border-gray-800">
+    <nav id="nav-sidebar" class="bg-gray-50 border-r border-gray-200 flex flex-col fixed max-h-screen min-h-screen min-w-sidebar transition-width w-sidebar dark:bg-gray-900 dark:border-gray-800">
+        <div class="border-b border-gray-200 mb-5 py-3 dark:border-gray-800">
             <div class="flex font-medium h-10 items-center px-6 text-gray-700 dark:text-gray-200">
                 {% if logo %}
                     <img src="{{ logo }}" alt="{% trans "Home" %}"/>

diff --git a/src/unfold/templatetags/unfold_list.py b/src/unfold/templatetags/unfold_list.py
@@ -53,6 +53,7 @@ def link_in_col(is_first, field_name, cl):
             "align-middle",
             "flex",
             "border-t",
+            "border-gray-200",
             "font-normal",
             "px-3",
             "py-2",
@@ -68,7 +69,6 @@ def link_in_col(is_first, field_name, cl):
             "lg:py-3",
             "lg:table-cell",
             "dark:border-gray-800",
-            "dark:text-gray-400",
         ]
 
         try:
@@ -95,11 +95,12 @@ def link_in_col(is_first, field_name, cl):
                         "before:content-[attr(data-label)]",
                         "before:mr-auto",
                         "before:text-gray-500",
-                        "dark:before:text-gray-400",
                         "lg:before:hidden",
                         "lg:border-t",
+                        "lg:border-gray-200",
                         "lg:table-cell",
-                        "dark:border-gray-800",
+                        "dark:before:text-gray-400",
+                        "dark:lg:border-gray-800",
                     ]
                 boolean = getattr(attr, "boolean", False)
                 label = getattr(attr, "label", False)

diff --git a/styles.css b/styles.css
@@ -258,7 +258,7 @@ table tr.selected {
 }
 
 [data-inline-type="stacked"] .add-row {
-  @apply border-t overflow-hidden dark:border-gray-800;
+  @apply border-t border-gray-200 overflow-hidden dark:border-gray-800;
 }
 
 .add-row td {

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -3,6 +3,7 @@ module.exports = {
     "./src/**/*.{html,py,js}",
   ],
   media: false,
+  darkMode: "class",
   theme: {
     extend: {
       colors: {
@@ -53,7 +54,6 @@ module.exports = {
       textColor: ["hover"]
     }
   },
-  darkMode: "class",
   plugins: [
       require('@tailwindcss/typography'),
   ]