dark mode

crispy_tailwind/templates/tailwind/field.html

@@ -7,7 +7,7 @@
 
     <{% if tag %}{{ tag }}{% else %}div{% endif %} id="div_{{ field.auto_id }}" class="{% if wrapper_class %}{{ wrapper_class }} {% endif %}{% if field_class %}{{ field_class }}{% else %}mb-3{% endif %}">
     {% if field.label and form_show_labels %}
-        <label for="{{ field.id_for_label }}" class="{% if label_class %}{{ label_class }}{% else %}block text-gray-700 text-sm font-bold mb-2{% endif %}">
+        <label for="{{ field.id_for_label }}" class="{% if label_class %}{{ label_class }}{% else %}block text-gray-700 text-sm font-bold mb-2 dark:text-gray-400{% endif %}">
             {{ field.label|safe }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}
         </label>
     {% endif %}

crispy_tailwind/templates/tailwind/layout/checkboxselectmultiple_inline.html

@@ -4,7 +4,7 @@
     <{% if tag %}{{ tag }}{% else %}div{% endif %} id="div_{{ field.auto_id }}" class="{% if wrapper_class %}{{ wrapper_class }} {% endif %}{% if field_class %}{{ field_class }}{% else %}mb-3{% endif %}">
 
     {% if field.label %}
-        <label for="{{ field.id_for_label }}"  class="{% if label_class %}{{ label_class }}{% else %}block text-gray-700 text-sm font-bold mb-2{% endif %}{% if not inline_class %} col-form-label{% endif %}{% if field.field.required %} requiredField{% endif %}">
+        <label for="{{ field.id_for_label }}"  class="{% if label_class %}{{ label_class }}{% else %}block text-gray-700 text-sm font-bold mb-2 dark:text-gray-400{% endif %}{% if not inline_class %} col-form-label{% endif %}{% if field.field.required %} requiredField{% endif %}">
             {{ field.label|safe }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}
         </label>
     {% endif %}

crispy_tailwind/templates/tailwind/layout/field_with_buttons.html

@@ -9,7 +9,7 @@
 
     <div class="{{ field_class }}">
         <div class="input-group">
-            {% crispy_field field %}
+            {% tailwind_field field %}
             <span class="input-group-append{% if active %} active{% endif %}{% if input_size %} {{ input_size }}{% endif %}">{{ buttons|safe }}</span>
         </div>
         {% include 'tailwind/layout/help_text_and_errors.html' %}

crispy_tailwind/templates/tailwind/layout/help_text.html

@@ -1,7 +1,7 @@
 {% if field.help_text %}
     {% if help_text_inline %}
-        <p id="hint_{{ field.auto_id }}" class="text-gray-600">{{ field.help_text|safe }}</p>x
+        <p id="hint_{{ field.auto_id }}" class="text-gray-600 dark:text-gray-500">{{ field.help_text|safe }}</p>x
     {% else %}
-        <small id="hint_{{ field.auto_id }}" class="text-gray-600">{{ field.help_text|safe }}</small>
+        <small id="hint_{{ field.auto_id }}" class="text-gray-600 dark:text-gray-500">{{ field.help_text|safe }}</small>
     {% endif %}
 {% endif %}

crispy_tailwind/templates/tailwind/layout/inline_field.html

@@ -6,7 +6,7 @@
     {% if field|is_checkbox %}
         <div id="div_{{ field.auto_id }}" class="form-check form-check-inline{% if wrapper_class %} {{ wrapper_class }}{% endif %}">
             <label for="{{ field.id_for_label }}" class="form-check-label{% if field.field.required %} requiredField{% endif %}">
-                {% crispy_field field 'class' 'form-check-input' %}
+                {% tailwind_field field 'class' 'form-check-input' %}
                 {{ field.label|safe }}
             </label>
         </div>
@@ -15,7 +15,7 @@
             <label for="{{ field.id_for_label }}" class="sr-only{% if field.field.required %} requiredField{% endif %}">
                 {{ field.label|safe }}
             </label>
-            {% crispy_field field 'placeholder' field.label %}
+            {% tailwind_field field 'placeholder' field.label %}
         </div>
     {% endif %}
 {% endif %}

crispy_tailwind/templates/tailwind/layout/prepended_appended_text.html

@@ -6,7 +6,7 @@
   <div id="div_{{ field.auto_id }}" class="{% if wrapper_class %}{{ wrapper_class }} {% endif %}{% if field_class %}{{ field_class }}{% else %}mb-3{% endif %}">
 
     {% if field.label and form_show_labels %}
-      <label for="{{ field.id_for_label }}" class="{% if label_class %}{{ label_class }}{% else %}block text-gray-700 text-sm font-bold mb-2{% endif %}">
+      <label for="{{ field.id_for_label }}" class="{% if label_class %}{{ label_class }}{% else %}block text-gray-700 text-sm font-bold mb-2 dark:text-gray-400{% endif %}">
         {{ field.label|safe }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}
       </label>
     {% endif %}

crispy_tailwind/templates/tailwind/layout/radioselect_inline.html

@@ -4,7 +4,7 @@
     <{% if tag %}{{ tag }}{% else %}div{% endif %} id="div_{{ field.auto_id }}" class="{% if wrapper_class %}{{ wrapper_class }} {% endif %}{% if field_class %}{{ field_class }}{% else %}mb-3{% endif %}">
 
     {% if field.label %}
-        <label for="{{ field.id_for_label }}"  class="{% if label_class %}{{ label_class }}{% else %}block text-gray-700 text-sm font-bold mb-2 {% endif %}{% if not inline_class %} col-form-label{% endif %}{% if field.field.required %} requiredField{% endif %}">
+        <label for="{{ field.id_for_label }}"  class="{% if label_class %}{{ label_class }}{% else %}block text-gray-700 text-sm font-bold mb-2 dark:text-gray-400 {% endif %}{% if not inline_class %} col-form-label{% endif %}{% if field.field.required %} requiredField{% endif %}">
             {{ field.label|safe }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}
         </label>
     {% endif %}

crispy_tailwind/templatetags/tailwind_field.py

@@ -188,9 +188,9 @@ def render(self, context):  # noqa: C901
 
 
 @register.tag(name="tailwind_field")
-def crispy_field(parser, token):
+def tailwind_field(parser, token):
     """
-    {% crispy_field field attrs %}
+    {% tailwind_field field attrs %}
     """
     token = token.split_contents()
     field = token.pop(1)

crispy_tailwind/templatetags/tailwind_filters.py

@@ -27,7 +27,7 @@ def uni_form_template(template_pack=TEMPLATE_PACK):
 
 @register.filter(name="crispy")
 def as_crispy_form(
-    form, template_pack=TEMPLATE_PACK, label_class="block text-gray-700 text-sm font-bold mb-2", field_class="mb-3"
+    form, template_pack=TEMPLATE_PACK, label_class="block text-gray-700 text-sm font-bold mb-2 dark:text-gray-400", field_class="mb-3"
 ):
     """
     The original and still very useful way to generate a div elegant form/formset::
@@ -98,7 +98,7 @@ def as_crispy_field(field, template_pack=TEMPLATE_PACK, label_class="", field_cl
 
     or::
 
-        {{ form.field|as_crispy_field:"bootstrap" }}
+        {{ form.field|as_crispy_field:"tailwind" }}
     """
     if not isinstance(field, boundfield.BoundField) and settings.DEBUG:
         raise CrispyError("|as_crispy_field got passed an invalid or inexistent field")

tests/test_crispy_addon.py

@@ -17,7 +17,7 @@ def test_crispy_addon(self):
         html = template.render(Context({"form": SampleForm()}))
         expected_html = """
         <div id="div_id_last_name" class="mb-3">
-            <label for="id_last_name" class="block text-gray-700 text-sm font-bold mb-2"> last name<span class="asteriskField">*</span> </label>
+            <label for="id_last_name" class="block text-gray-700 text-sm font-bold mb-2 dark:text-gray-400"> last name<span class="asteriskField">*</span> </label>
             <div class="">
                 <div class="flex">
                     <span class="border-gray-300 border rounded-lg rounded-r-none px-3 bg-gray-200 text-gray-800 flex items-center">$</span>

tests/test_filter.py

@@ -22,20 +22,20 @@ def test_crispy_filter(self):
         self.assertHTMLEqual(
             html,
             """<div id="div_id_is_company" class="mb-3">
-            <label for="id_is_company" class="block text-gray-700 text-sm font-bold mb-2">company</label>
+            <label for="id_is_company" class="block text-gray-700 text-sm font-bold mb-2 dark:text-gray-400">company</label>
             <input type="checkbox" name="is_company" class="checkboxinput " id="id_is_company"> </div>
 
             <div id="div_id_email" class="mb-3">
-            <label for="id_email" class="block text-gray-700 text-sm font-bold mb-2">email<span class="asteriskField">
+            <label for="id_email" class="block text-gray-700 text-sm font-bold mb-2 dark:text-gray-400">email<span class="asteriskField">
             *</span> </label>
             <input type="text" name="email" maxlength="30" class="textinput textInput inputtext w-full rounded-lg """
             """border appearance-none py-2 border-gray-300 bg-white text-gray-700 focus:outline-none px-4 block """
             """leading-normal"
             required id="id_email">
-            <small id="hint_id_email" class="text-gray-600">Insert your email</small> </div>
+            <small id="hint_id_email" class="text-gray-600 dark:text-gray-500">Insert your email</small> </div>
 
             <div id="div_id_password1" class="mb-3">
-            <label for="id_password1" class="block text-gray-700 text-sm font-bold mb-2">password<span
+            <label for="id_password1" class="block text-gray-700 text-sm font-bold mb-2 dark:text-gray-400">password<span
             class="asteriskField">*</span>
             </label>
             <input type="password" name="password1" maxlength="30"
@@ -45,7 +45,7 @@ def test_crispy_filter(self):
             </div>
 
             <div id="div_id_password2" class="mb-3">
-            <label for="id_password2" class="block text-gray-700 text-sm font-bold mb-2">
+            <label for="id_password2" class="block text-gray-700 text-sm font-bold mb-2 dark:text-gray-400">
             re-enter password<span class="asteriskField">*</span> </label>
             <input type="password" name="password2" maxlength="30"
             class="passwordinput w-full rounded-lg """
@@ -54,23 +54,23 @@ def test_crispy_filter(self):
             required id="id_password2"> </div>
 
             <div id="div_id_first_name" class="mb-3">
-            <label for="id_first_name" class="block text-gray-700 text-sm font-bold mb-2">
+            <label for="id_first_name" class="block text-gray-700 text-sm font-bold mb-2 dark:text-gray-400">
             first name<span class="asteriskField">*</span> </label>
             <input type="text" name="first_name" maxlength="5" class="textinput textInput inputtext w-full """
             """rounded-lg border appearance-none py-2 border-gray-300 bg-white text-gray-700 focus:outline-none """
             'px-4 block leading-normal"'
             """required id="id_first_name"> </div>
 
             <div id="div_id_last_name" class="mb-3">
-            <label for="id_last_name" class="block text-gray-700 text-sm font-bold mb-2">
+            <label for="id_last_name" class="block text-gray-700 text-sm font-bold mb-2 dark:text-gray-400">
             last name<span class="asteriskField">*</span> </label>
             <input type="text" name="last_name" maxlength="5"
             class="textinput textInput inputtext w-full rounded-lg border appearance-none py-2 border-gray-300 """
             """bg-white text-gray-700 focus:outline-none px-4 block leading-normal" required id="id_last_name"> """
             """</div>
 
             <div id="div_id_datetime_field" class="mb-3">
-            <label for="id_datetime_field_0" class="block text-gray-700 text-sm font-bold mb-2">
+            <label for="id_datetime_field_0" class="block text-gray-700 text-sm font-bold mb-2 dark:text-gray-400">
             date time<span class="asteriskField">*</span> </label>
             <input type="text" name="datetime_field_0"
             class="dateinput rounded-lg focus:outline border appearance-none py-2 mr-2 border-gray-300 bg-white """
@@ -80,7 +80,7 @@ def test_crispy_filter(self):
             """leading-normal" required id="id_datetime_field_1"> </div>
 
             <div id="div_id_tos_accepted" class="mb-3">
-            <label for="id_tos_accepted" class="block text-gray-700 text-sm font-bold mb-2">
+            <label for="id_tos_accepted" class="block text-gray-700 text-sm font-bold mb-2 dark:text-gray-400">
             terms of service<span class="asteriskField">*</span> </label>
             <div class="mb-3">
             <div class="relative">
@@ -131,7 +131,7 @@ def test_formset(self):
 
             <div class="multiField">
                 <div id="div_id_form-0-name" class="mb-3">
-                    <label for="id_form-0-name" class="block text-gray-700 text-sm font-bold mb-2"> Name<span class="asteriskField">*</span> </label>
+                    <label for="id_form-0-name" class="block text-gray-700 text-sm font-bold mb-2 dark:text-gray-400"> Name<span class="asteriskField">*</span> </label>
                     <input
                         type="text"
                         name="form-0-name"
@@ -144,7 +144,7 @@ def test_formset(self):
 
             <div class="multiField">
                 <div id="div_id_form-1-name" class="mb-3">
-                    <label for="id_form-1-name" class="block text-gray-700 text-sm font-bold mb-2"> Name<span class="asteriskField">*</span> </label>
+                    <label for="id_form-1-name" class="block text-gray-700 text-sm font-bold mb-2 dark:text-gray-400"> Name<span class="asteriskField">*</span> </label>
                     <input
                         type="text"
                         name="form-1-name"