feat: darkmode support (#26)

unfoldadmin · Nov 21, 2022 · 4414a0b · 4414a0b
1 parent ab892cf
commit 4414a0b
Show file tree

Hide file tree

Showing 57 changed files with 381 additions and 462 deletions.
diff --git a/README.md b/README.md
@@ -106,16 +106,16 @@ UNFOLD = {
     ],
     "COLORS": {
         "primary": {
-            "50": "#FAF5FF",
-            "100": "#F3E8FF",
-            "200": "#E9D5FF",
-            "300": "#D8B4FE",
-            "400": "#C084FC",
-            "500": "#A855F7",
-            "600": "#9333EA",
-            "700": "#7E22CE",
-            "800": "#6B21A8",
-            "900": "#581C87",
+            "50": "250 245 255",
+            "100": "243 232 255",
+            "200": "233 213 255",
+            "300": "216 180 254",
+            "400": "192 132 252",
+            "500": "168 85 247",
+            "600": "147 51 234",
+            "700": "126 34 206",
+            "800": "107 33 168",
+            "900": "88 28 135",
         },
     },
     "EXTENSIONS": {
@@ -321,6 +321,7 @@ class CustomSliderNumericFilter(SliderNumericFilter):
 
 @admin.register(User)
 class YourModelAdmin(ModelAdmin):
+    list_filter_submit = True  # Submit button at the bottom of the filter
     list_filter = (
         ("field_A", SingleNumericFilter),  # Numeric single field search, __gte lookup
         ("field_B", RangeNumericFilter),  # Numeric range search, __gte and __lte lookup
@@ -386,15 +387,15 @@ module.exports = {
     // In case custom colors are defined in UNFOLD["COLORS"]
     colors: {
         primary: {
-            100: "var(--color-primary-100)",
-            200: "var(--color-primary-200)",
-            300: "var(--color-primary-300)",
-            400: "var(--color-primary-400)",
-            500: "var(--color-primary-500)",
-            600: "var(--color-primary-600)",
-            700: "var(--color-primary-700)",
-            800: "var(--color-primary-800)",
-            900: "var(--color-primary-900)"
+          100: "rgb(var(--color-primary-100) / <alpha-value>)",
+          200: "rgb(var(--color-primary-200) / <alpha-value>)",
+          300: "rgb(var(--color-primary-300) / <alpha-value>)",
+          400: "rgb(var(--color-primary-400) / <alpha-value>)",
+          500: "rgb(var(--color-primary-500) / <alpha-value>)",
+          600: "rgb(var(--color-primary-600) / <alpha-value>)",
+          700: "rgb(var(--color-primary-700) / <alpha-value>)",
+          800: "rgb(var(--color-primary-800) / <alpha-value>)",
+          900: "rgb(var(--color-primary-900) / <alpha-value>)"
         }
     }
 }

diff --git a/src/unfold/admin.py b/src/unfold/admin.py
@@ -34,6 +34,7 @@
 from .settings import get_config
 from .utils import display_for_field
 from .widgets import (
+    CHECKBOX_LABEL_CLASSES,
     INPUT_CLASSES,
     LABEL_CLASSES,
     SELECT_CLASSES,
@@ -102,7 +103,7 @@ def label_tag(self):
         contents = conditional_escape(self.field.label)
 
         if self.is_checkbox:
-            classes.append(" ".join(["ml-2", "text-sm", "text-gray-900"]))
+            classes.append(" ".join(CHECKBOX_LABEL_CLASSES))
         else:
             classes.append(" ".join(LABEL_CLASSES))
 

diff --git a/src/unfold/contrib/filters/templates/unfold/filters/filters_numeric_slider.html b/src/unfold/contrib/filters/templates/unfold/filters/filters_numeric_slider.html
@@ -9,8 +9,13 @@ <h3 class="font-medium mb-4 text-sm">
 
         {% if choice.min is not None and choice.max is not None and choice.step %}
             <div class="admin-numeric-filter-slider-tooltips">
-                <span class="admin-numeric-filter-slider-tooltip-from">{{ choice.value_from }}</span>
-                <span class="admin-numeric-filter-slider-tooltip-to">{{ choice.value_to }}</span>
+                <span class="admin-numeric-filter-slider-tooltip-from border cursor-not-allowed flex flex-grow flex-row items-center mr-auto rounded-md shadow-sm px-3 py-2 w-full dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400">
+                    {{ choice.value_from }}
+                </span>
+
+                <span class="admin-numeric-filter-slider-tooltip-to border cursor-not-allowed flex flex-grow flex-row items-center rounded-md shadow-sm px-3 py-2 w-full dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400">
+                    {{ choice.value_to }}
+                </span>
             </div>
 
             <div class="admin-numeric-filter-slider" data-min="{{ choice.min|unlocalize }}" data-max="{{ choice.max|unlocalize }}" data-decimals="{{ choice.decimals }}" data-step="{{ choice.step|unlocalize }}">
@@ -20,7 +25,7 @@ <h3 class="font-medium mb-4 text-sm">
                 {{ choice.form.as_p }}
             </div>
         {% else %}
-            <div class="admin-numeric-filter-slider-error">
+            <div class="admin-numeric-filter-slider-error dark:text-gray-400">
                 <p>
                     {% trans 'Not enough data.' %}
                 </p>

diff --git a/src/unfold/forms.py b/src/unfold/forms.py
@@ -10,18 +10,13 @@
 from django.contrib.auth.forms import UserCreationForm as BaseUserCreationForm
 from django.utils.translation import gettext_lazy as _
 
-from .widgets import BASE_INPUT_CLASSES, INPUT_CLASSES
+from .widgets import BASE_INPUT_CLASSES, INPUT_CLASSES, SELECT_CLASSES
 
 
 class ActionForm(forms.Form):
     action = forms.ChoiceField(
         label="",
-        widget=forms.Select(
-            {
-                "class": "appearance-none bg-none bg-white cursor-pointer font-medium h-9 px-3 rounded-md"
-                " text-sm text-gray-500 w-40 focus:outline-none lg:w-60",
-            }
-        ),
+        widget=forms.Select({"class": " ".join([*SELECT_CLASSES, "w-60"])}),
     )
 
     select_across = forms.BooleanField(
@@ -55,7 +50,7 @@ def __init__(self, request=None, *args, **kwargs):
         self.fields["password"].help_text = _(
             "Raw passwords are not stored, so there is no way to see this "
             "user’s password, but you can change the password using "
-            '<a href="{}" class="text-primary-600 underline whitespace-nowrap">this form</a>.'
+            '<a href="{}" class="text-primary-500 underline whitespace-nowrap">this form</a>.'
         )
 
         password = self.fields.get("password")

diff --git a/src/unfold/settings.py b/src/unfold/settings.py
@@ -7,7 +7,20 @@
     "SITE_HEADER": None,
     "SITE_URL": "/",
     "SITE_ICON": None,
-    "COLORS": {},
+    "COLORS": {
+        "primary": {
+            "50": "250 245 255",
+            "100": "243 232 255",
+            "200": "233 213 255",
+            "300": "216 180 254",
+            "400": "192 132 252",
+            "500": "168 85 247",
+            "600": "147 51 234",
+            "700": "126 34 206",
+            "800": "107 33 168",
+            "900": "88 28 135",
+        },
+    },
     "DASHBOARD_CALLBACK": None,
     "STYLES": [],
     "SCRIPTS": [],

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/actions.html b/src/unfold/templates/admin/actions.html
@@ -2,7 +2,7 @@
 
 <div class="actions flex flex-col md:flex-row md:items-center">
     {% block actions %}
-        <div class="bg-white border flex shadow-sm rounded-md focus-within:ring focus-within:ring-primary-300 focus-within:border-primary-600">
+        <div class="flex">
             {% block actions-form %}
                 {% for field in action_form %}
                     {% if field.label %}
@@ -19,16 +19,16 @@
             {% endblock %}
 
             {% block actions-submit %}
-                <button type="submit" class="flex items-center h-9 ml-auto px-2 text-gray-400 focus:outline-none" title="{% translate "Run the selected action" %}" name="index" value="{{ action_index|default:0 }}">
-                    <span class="material-icons md-18">arrow_forward</span>
+                <button type="submit" class="bg-white border flex items-center h-9.5 ml-1 px-2 rounded shadow-sm text-gray-400 transition-all w-9.5 hover:text-primary-600 focus:outline-none dark:bg-gray-900 dark:border-gray-700 dark:text-gray-500" title="{% translate "Run the selected action" %}" name="index" value="{{ action_index|default:0 }}">
+                    <span class="material-icons md-18">chevron_right</span>
                 </button>
             {% endblock %}
         </div>
 
         {% block actions-counter %}
             {% if actions_selection_counter %}
                 <div class="hidden md:block">
-                    <span class="action-counter ml-4 text-sm text-gray-500" data-actions-icnt="{{ cl.result_list|length }}">
+                    <span class="action-counter ml-4 text-sm text-gray-500 dark:text-gray-400" data-actions-icnt="{{ cl.result_list|length }}">
                         {{ selection_note }}
                     </span>
 

diff --git a/src/unfold/templates/admin/app_list.html b/src/unfold/templates/admin/app_list.html
@@ -8,7 +8,7 @@
                     {% if app.models and not app.hidden %}
                         <li>
                             {% if app.name %}
-                                <a href="{{ app.app_url }}" class="block font-semibold mb-2 mt-4 text-gray-700 text-sm" title="{% blocktranslate with name=app.name %}Models in the {{ name }} application{% endblocktranslate %}">
+                                <a href="{{ app.app_url }}" class="block font-semibold mb-2 mt-4 text-gray-700 text-sm dark:text-gray-200" title="{% blocktranslate with name=app.name %}Models in the {{ name }} application{% endblocktranslate %}">
                                     {{ app.name }}
                                 </a>
                             {% endif %}
@@ -21,13 +21,13 @@
                                         {% endif %}
                                         <li class="model-{{ model.object_name|lower }}{% if model.admin_url in request.path|urlencode %} current-model{% endif %}">
                                             {% if model.header %}
-                                                <h3 class="font-medium my-3 text-gray-900 text-sm">
+                                                <h3 class="font-medium my-3 text-gray-900 text-sm dark:text-gray-200">
                                                     {{ model.header }}
                                                 </h3>
                                             {% endif %}
 
                                             {% if model.admin_url %}
-                                                <a href="{{ model.admin_url }}" id="link-{{ app.app_label }}-{{ model.object_name|lower }}" class="block flex items-center -mx-3 px-3 py-3 rounded-md {% if model.admin_url in request.path|urlencode %}bg-gray-100 font-semibold text-primary-600{% else %}text-gray-500 hover:text-gray-700{% endif %}">
+                                                <a href="{{ model.admin_url }}" id="link-{{ app.app_label }}-{{ model.object_name|lower }}" class="block border border-transparent flex items-center -mx-3 px-3 py-3 rounded-md transition-all {% if model.admin_url in request.path|urlencode %}bg-gray-100 font-semibold text-primary-500 dark:border dark:border-gray-800 dark:bg-white/[.02]{% else %}text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200{% endif %}">
                                                     {% if model.icon %}
                                                         <span class="material-icons md-18 mr-3">{{ model.icon }}</span>
                                                     {% endif %}

diff --git a/src/unfold/templates/admin/auth/user/change_password.html b/src/unfold/templates/admin/auth/user/change_password.html
@@ -40,51 +40,14 @@
                     <input type="hidden" name="{{ is_popup_var }}" value="1">
                 {% endif %}
 
-                {% if form.errors %}
-                    <p class="errornote bg-red-100 mb-8 text-red-600 px-3 py-3 rounded-md text-sm">
-                        {% if form.errors.items|length == 1 %}
-                            {% translate "Please correct the error below." %}
-                        {% else %}
-                            {% translate "Please correct the errors below." %}
-                        {% endif %}
-                    </p>
-                {% endif %}
-
-                <p class="bg-primary-100 mb-8 text-primary-600 px-3 py-3 rounded-md text-sm">
-                    {% blocktranslate with username=original %}Enter a new password for the user <strong>{{ username }}</strong>.{% endblocktranslate %}
-                </p>
-
-                <div class="flex mb-6 flex-col">
-                    <label for="{{ form.password1.id_for_label }}" class="block font-medium mb-2 text-gray-900 text-sm">
-                        {{ form.password1.label }}
-                    </label>
-
-                    {{ form.password1 }}
-
-                    {% include "unfold/helpers/form_errors.html" with errors=form.password1.errors %}
-
-                    {% if form.password1.help_text %}
-                        <div class="leading-relaxed mt-2 text-gray-500 text-xs">
-                            {{ form.password1.help_text|safe }}
-                        </div>
-                    {% endif %}
-                </div>
-
-                <div class="flex mb-6 flex-col">
-                    <label for="{{ form.password2.id_for_label }}" class="block font-medium mb-2 text-gray-900 text-sm">
-                        {{ form.password2.label }}
-                    </label>
+                {% include "unfold/helpers/messages/errornote.html" with errors=form.errors %}
 
-                    {{ form.password2 }}
+                {% blocktranslate with username=original asvar message %}Enter a new password for the user <strong>{{ username }}</strong>.{% endblocktranslate %}
+                {% include "unfold/helpers/messages/info.html" with message=message %}
 
-                    {% include "unfold/helpers/form_errors.html" with errors=form.password2.errors %}
+                {% include "unfold/helpers/field.html" with field=form.password1 %}
 
-                    {% if form.password2.help_text %}
-                        <div class="leading-relaxed mt-2 text-gray-500 text-xs">
-                            {{ form.password2.help_text|safe }}
-                        </div>
-                    {% endif %}
-                </div>
+                {% include "unfold/helpers/field.html" with field=form.password2 %}
 
                 <button type="submit" class="bg-primary-600 border border-transparent font-medium px-3 py-2 rounded-md text-sm text-white">
                     {% translate 'Change password' %}

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 py-4 lg:px-12">
+                    <div class="border-b mb-6 px-4 py-4 lg:px-12 dark:border-gray-800">
                         <div class="container mx-auto">
                             <div id="header-inner" class="flex items-center">
                                 <div class="flex items-center w-full">
@@ -57,7 +57,7 @@
                     <div class="px-4 lg:px-12">
                         <ul class="container mx-auto">
                             {% for message in messages %}
-                                <li class="mb-3 px-3 py-3 rounded-md text-sm last:mb-8 {% if message.tags == 'success' %}bg-green-100 text-green-600{% elif message.tags == 'warning' %}bg-yellow-100 text-yellow-600 {% elif message.tags == 'error' %} bg-red-100 text-red-600{% else %}bg-gray-100 text-gray-700{% endif %}">
+                                <li class="mb-3 px-3 py-3 rounded-md text-sm last:mb-8 {% if message.tags == 'success' %}bg-green-100 text-green-600 dark:bg-green-500/20 dark:border-green-500/10{% elif message.tags == 'warning' %}bg-orange-200 text-orange-500 dark:bg-orange-500/20 dark:border-orange-500/10 {% elif message.tags == 'error' %} bg-red-100 text-red-600 dark:bg-red-500/20 dark:border-red-500/10{% else %}bg-gray-100 text-gray-700{% endif %}">
                                     {{ message|capfirst }}
                                 </li>
                             {% endfor %}

diff --git a/src/unfold/templates/admin/change_form.html b/src/unfold/templates/admin/change_form.html
@@ -82,14 +82,9 @@
                     <input type="hidden" name="{{ to_field_var }}" value="{{ to_field }}">
                 {% endif %}
 
+
                 {% if errors %}
-                    <p class="errornote bg-red-100 mb-8 text-red-600 px-3 py-3 rounded-md text-sm">
-                        {% if errors|length == 1 %}
-                            {% translate "Please correct the error below." %}
-                        {% else %}
-                            {% translate "Please correct the errors below." %}
-                        {% endif %}
-                    </p>
+                    {% include "unfold/helpers/messages/errornote.html" with errors=errors %}
 
                     {{ adminform.form.non_field_errors }}
                 {% endif %}

diff --git a/src/unfold/templates/admin/change_form_object_tools.html b/src/unfold/templates/admin/change_form_object_tools.html
@@ -3,12 +3,12 @@
 {% block object-tools-items %}
     {% url opts|admin_urlname:'history' original.pk|admin_urlquote as history_url %}
 
-    <a href="{% add_preserved_filters history_url %}" class="historylink mx-1 px-3 py-2 rounded-md hover:bg-gray-100">
+    <a href="{% add_preserved_filters history_url %}" class="historylink mx-1 px-3 py-2 rounded-md transition-all hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-gray-200">
         {% trans 'History' %}
     </a>
 
     {% if has_absolute_url %}
-        <a href="{{ absolute_url }}" class="viewsitelink mx-1 px-3 py-2 rounded-md hover:bg-gray-100">
+        <a href="{{ absolute_url }}" class="viewsitelink mx-1 px-3 py-2 rounded-md transition-all hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-gray-200">
             {% trans 'View on site' %}
         </a>
     {% endif %}