fix(dark-mode): refactoring to semantic colors

fiesta/apps/accounts/templates/account/login.html

@@ -37,11 +37,11 @@ <h1 class="card-title">{% trans "Log in" %}</h1>
                  class="w-4 h-4 bg-gray-50 rounded border border-gray-300 focus:ring-3 focus:ring-blue-300">
         </div>
         <div class="ml-3 text-sm">
-          <label for="{{ form.remember.name }}" class="font-medium text-gray-900">Remember me</label>
+          <label for="{{ form.remember.name }}" class="font-medium test-base-content">Remember me</label>
         </div>
       </div>
       <a href="{% url 'account_reset_password' %}"
-         class="link link-neutral link-hover">Lost Password?</a>
+         class="link link-neutral link-hover text-base-content">Lost Password?</a>
     </div>
     <button type="submit" class="btn btn-primary btn-block">Log in to your account</button>
     {# social accounts logins do have their own forms, so it cannot be nested #}

fiesta/apps/accounts/templates/accounts/memberships/membership_list.html

@@ -26,20 +26,20 @@ <h1 class="card-title">My Memberships</h1>
           </svg>
         </div>
         <div class="flex-1 min-w-0">
-          <p class="text-sm font-medium text-gray-900 truncate">{{ membership.section }}</p>
+          <p class="text-sm font-medium text-base-content truncate">{{ membership.section }}</p>
           <p class="text-sm text-gray-500 truncate">{{ membership.get_role_display }}</p>
         </div>
         <div class="inline-flex items-end flex-col">
-          <span class="text-sm font-semibold text-gray-900">{{ membership.get_state_display }}</span>
+          <span class="text-sm font-semibold text-base-content">{{ membership.get_state_display }}</span>
           {% if membership.state == membership.State.INACTIVE %}
-            <span class="text-xs text-gray-600">waiting for confirmation</span>
+            <span class="text-xs text-base-content">waiting for confirmation</span>
           {% endif %}
         </div>
       </div>
     </li>
   {% endfor %}
   <li class="py-6 flex flex-row justify-between items-center">
-    <h1 class="text-gray-900 text-lg font-medium">Your section is not here?</h1>
+    <h1 class="text-base-content text-lg font-medium">Your section is not here?</h1>
     <a class="btn btn-wide btn-primary"
        href="{% url "accounts:membership-new" %}">Request new membership</a>
   </li>

fiesta/apps/accounts/templates/accounts/memberships/my_memberships.html

@@ -18,7 +18,7 @@
         no memberships
       </span>
       <div class="flex flex-row justify-between items-center space-x-4">
-        <h1 class="text-gray-900 text-lg font-medium">Your section is not here?</h1>
+        <h1 class="test-base-content text-lg font-medium">Your section is not here?</h1>
         <a class="bg-primary text-white p-2 rounded inline-block"
            href="{% url "accounts:membership-new" %}">Request new membership</a>
       </div>

fiesta/apps/accounts/templates/accounts/memberships/new_membership_form.html

@@ -26,7 +26,7 @@ <h2 class="text-center text-lg title-font pb-4">Who you are?</h2>
       </svg>
     </div>
     <div class="flex-grow">
-      <h2 class="text-gray-900 text-lg title-font font-medium mb-3">International Student</h2>
+      <h2 class="test-base-content text-lg title-font font-medium mb-3">International Student</h2>
       <p class="leading-relaxed text-base">Are you ready for your Erasmus experience? Buddy, ESNcard, events?</p>
     </div>
   </div>
@@ -46,7 +46,7 @@ <h2 class="text-gray-900 text-lg title-font font-medium mb-3">International Stud
       </svg>
     </div>
     <div class="flex-grow">
-      <h2 class="text-gray-900 text-sm font-medium mb-2">ESN Section Member</h2>
+      <h2 class="test-base-content text-sm font-medium mb-2">ESN Section Member</h2>
       <p class="text-sm">Ready to spend all your time in ESN?</p>
     </div>
   </div>

fiesta/apps/accounts/templates/accounts/user_profile/base.html

@@ -11,7 +11,7 @@
 {% block main %}
   <div class="flex flex-row items-start justify-between space-x-4">
     <div class="w-1/4">
-      <ul class="menu bg-gray-200 rounded-box">
+      <ul class="menu bg-base-200 rounded-box">
         <li>
           <a href="{% url "accounts:my-profile" %}">
             <svg xmlns="http://www.w3.org/2000/svg"

fiesta/apps/accounts/templates/accounts/user_profile/detail.html

@@ -30,7 +30,7 @@ <h1 class="card-title">{% trans "My Profile" %}</h1>
         </svg>
       {% endif %}
     </div>
-    <div class="md:w-3/5 bg-gray-100 shadow rounded-box p-4 mb-4 mt-4 md:box-content">
+    <div class="md:w-3/5 bg-base-200 shadow rounded-box p-4 mb-4 mt-4 md:box-content">
       <h1 class="card-title pb-1 mb-3 border-b-2">{% trans "Basic information" %}</h1>
       <table class="border-separate gap-4">
         {% with user=object.user profile=object.user.profile_or_none %}
@@ -58,7 +58,7 @@ <h1 class="card-title pb-1 mb-3 border-b-2">{% trans "Basic information" %}</h1>
       </table>
     </div>
   </div>
-  <div class="bg-gray-100 shadow rounded-box p-4 mb-4 md:box-content">
+  <div class="bg-base-200 shadow rounded-box p-4 mb-4 md:box-content">
     <h1 class="card-title pb-1 mb-3 border-b-2">{% trans "Studies" %}</h1>
     <table class="border-separate gap-4">
       {% with profile=object.user.profile_or_none %}
@@ -80,7 +80,7 @@ <h1 class="card-title pb-1 mb-3 border-b-2">{% trans "Studies" %}</h1>
     </table>
   </div>
 
-  <div class="bg-gray-100 shadow rounded-box p-4 mb-4 md:box-content">
+  <div class="bg-base-200 shadow rounded-box p-4 mb-4 md:box-content">
     <h1 class="card-title pb-1 mb-3 border-b-2">{% trans "Socials and contact" %}</h1>
     <div class="overflow-hidden">
       <table class="border-separate gap-4">
@@ -119,7 +119,7 @@ <h1 class="card-title pb-1 mb-3 border-b-2">{% trans "Socials and contact" %}</h
     </div>
   </div>
 
-  <div class="bg-gray-100 shadow rounded-box p-4 mb-4 md:box-content">
+  <div class="bg-base-200 shadow rounded-box p-4 mb-4 md:box-content">
     <h1 class="card-title pb-1 mb-3 border-b-2">{% trans "Interests" %}</h1>
     <div class="inline-flex flex-wrap">
       {% for interest in object.user.profile.get_interests_display %}

fiesta/apps/buddy_system/templates/buddy_system/wanna_buddy.html

@@ -14,7 +14,7 @@
   <section class="py-20">
     <div class="container mx-auto px-4">
       <div class="max-w-3xl mx-auto text-center">
-        <h2 class="text-4xl font-bold text-gray-900 dark:text-gray-200">
+        <h2 class="text-4xl font-bold test-base-content dark:text-gray-200">
           Maximize Your Study Abroad Experience: The Buddy System Advantage!
         </h2>
         <p class="text-lg text-gray-700 dark:text-gray-300 my-12">
@@ -24,42 +24,42 @@ <h2 class="text-4xl font-bold text-gray-900 dark:text-gray-200">
       </div>
       <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
         <div class="bg-white rounded-lg shadow-md p-6 hover:shadow transition-shadow">
-          <h3 class="text-2xl font-bold text-gray-900 mb-4">Cultural Exchange</h3>
+          <h3 class="text-2xl font-bold test-base-content mb-4">Cultural Exchange</h3>
           <p class="text-lg text-gray-700 mb-4">
             International students can learn about the local culture and customs
             from their buddy, and in turn, share their own culture and experiences.
           </p>
         </div>
         <div class="bg-pink-100 rounded-lg shadow-md p-6 hover:shadow transition-shadow">
-          <h3 class="text-2xl font-bold text-gray-900 mb-4">Language Practice</h3>
+          <h3 class="text-2xl font-bold test-base-content mb-4">Language Practice</h3>
           <p class="text-lg text-gray-700 mb-4">
             International students can practice their language skills with their
             buddy, which can help them improve their communication abilities and confidence.
           </p>
         </div>
         <div class="bg-yellow-100 rounded-lg shadow-md p-6 hover:shadow transition-shadow">
-          <h3 class="text-2xl font-bold text-gray-900 mb-4">Social Support</h3>
+          <h3 class="text-2xl font-bold test-base-content mb-4">Social Support</h3>
           <p class="text-lg text-gray-700 mb-4">
             International students can feel less lonely and isolated with the help
             of their buddy, who can offer emotional support and help them make new friends.
           </p>
         </div>
         <div class="bg-purple-100 rounded-lg shadow-md p-6 hover:shadow transition-shadow">
-          <h3 class="text-2xl font-bold text-gray-900 mb-4">Practical Assistance</h3>
+          <h3 class="text-2xl font-bold test-base-content mb-4">Practical Assistance</h3>
           <p class="text-lg text-gray-700 mb-4">
             Buddies can help international students navigate the new environment,
             such as finding housing, transportation, and healthcare services.
           </p>
         </div>
         <div class="bg-green-100 rounded-lg shadow-md p-6 hover:shadow transition-shadow">
-          <h3 class="text-2xl font-bold text-gray-900 mb-4">Safety and Security</h3>
+          <h3 class="text-2xl font-bold test-base-content mb-4">Safety and Security</h3>
           <p class="text-lg text-gray-700 mb-4">
             Having a buddy can provide a sense of security for international
             students, especially when traveling or exploring new areas.
           </p>
         </div>
         <div class="bg-orange-100 rounded-lg shadow-md p-6 hover:shadow transition-shadow">
-          <h3 class="text-2xl font-bold text-gray-900 mb-4">Long-Term Connections</h3>
+          <h3 class="text-2xl font-bold test-base-content mb-4">Long-Term Connections</h3>
           <p class="text-lg text-gray-700 mb-4">
             Buddies can develop long-lasting friendships that can continue even
             after the international student returns home.

fiesta/apps/events/apps.py

@@ -9,7 +9,7 @@ class EventsConfig(BasePluginAppConfig):
     default_auto_field = "django.db.models.BigAutoField"
     name = "apps.events"
     verbose_name = _("Events")
-    emoji = ""
+    emoji = "🗓️"
     description = _("Fiesta plugin to handle events management and registrations.")
 
     configuration_model = "events.EventsConfiguration"

fiesta/apps/sections/templates/sections/plugins.html

@@ -18,7 +18,7 @@
   <div x-data="{ open: window.location.hash.slice(1) }" class="space-y-2">
     {% for app, plugin, conf_form, plugin_form in plugins %}
       <div
-        class="collapse bg-slate-100"
+        class="collapse bg-slate-100 dark:bg-slate-800"
         data-label="{{ app.label }}"
         data-plugin="{{ plugin.pk }}"
         {# when the setup is required first, do not show the collapse arrow yet #}

fiesta/templates/fiesta/parts/footer.html

@@ -1,24 +1,24 @@
 {% load static %}
-<footer class="bg-gray-100 dark:bg-gray-900">
+<footer class="bg-gray-100 dark:bg-gray-900 text-base-content">
   <div class="container px-5 py-6 mx-auto flex items-center sm:flex-row flex-col">
-    <a class="flex title-font font-medium items-center md:justify-start justify-center text-gray-900"
+    <a class="flex title-font font-medium items-center md:justify-start justify-center test-base-content"
        href="https://esnvutbrno.cz/">
       <svg class="mr-3 h-10 w-10" viewBox="0 0 212 212">
         <use href="{% static "panda.svg" %}#panda"></use>
       </svg>
     </a>
-    <p class="text-gray-600 sm:ml-6 sm:mt-0 mt-4">
+    <p class="sm:ml-6 sm:mt-0 mt-4">
       © {% now 'Y' %} ESN VUT Brno —
       <a href="https://github.com/esnvutbrno"
          rel="noopener noreferrer"
-         class="text-gray-600 ml-1"
+         class="ml-1"
          target="_blank">@esnvutbrno</a>
     </p>
     <span class="mx-auto">
-      <a class="text-gray-600" href="{% url "public:team" %}">Our Team</a>
+      <a href="{% url "public:team" %}">Our Team</a>
     </span>
     <span class="inline-flex sm:ml-auto sm:mt-0 mt-4 justify-center sm:justify-start">
-      <a class="text-gray-500">
+      <a>
         <svg fill="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
@@ -28,7 +28,7 @@
           <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
         </svg>
       </a>
-      <a class="ml-3 text-gray-500">
+      <a class="ml-3">
         <svg fill="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
@@ -39,7 +39,7 @@
           </path>
         </svg>
       </a>
-      <a class="ml-3 text-gray-500">
+      <a class="ml-3">
         <svg fill="none"
              stroke="currentColor"
              stroke-linecap="round"
@@ -51,7 +51,7 @@
           <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
         </svg>
       </a>
-      <a class="ml-3 text-gray-500">
+      <a class="ml-3">
         <svg fill="currentColor"
              stroke="currentColor"
              stroke-linecap="round"

fiesta/templates/fiesta/parts/user_status.html

@@ -2,7 +2,7 @@
 {% load utils %}
 {% if request.user.is_authenticated %}
   <button type="button"
-          class="flex mr-3 text-sm rounded-full md:mr-0 focus:ring-4 focus:ring-gray-300"
+          class="flex mr-3 text-sm rounded-full md:mr-0 focus:ring-4 focus:ring-base-300"
           aria-expanded="false"
           @click="user = !user"
           @click.outside="user = false">
@@ -16,20 +16,20 @@
             style="background-color: {{ request.user.id|get_color_by_text }}">{{ request.user.first_name|first }}{{ request.user.last_name|first }}</span>
     {% endif %}
   </button>
-  <div class="z-30 my-4 text-base list-none bg-white rounded divide-y divide-gray-100 shadow w-40 absolute top-full -right-1/2 hidden"
+  <div class="z-30 my-4 text-base list-none bg-base-100 rounded divide-y divide-base-200 shadow w-40 absolute top-full -right-1/2 hidden"
        :class="{hidden: !user}">
-    <a class="block py-2 px-4 text-gray-800 hover:bg-gray-100"
+    <a class="block py-2 px-4 text-base-content hover:bg-base-200"
        href="{% url "accounts:my-profile" %}">
-      <span class="block text-sm text-gray-900">{{ request.user.get_full_name }}</span>
-      <span class="block text-sm font-medium text-gray-500 truncate">{{ request.user.username }}</span>
+      <span class="block text-sm ">{{ request.user.get_full_name }}</span>
+      <span class="block text-sm font-medium truncate">{{ request.user.username }}</span>
     </a>
     {% if request.membership %}
       <a
-        class="block py-2 px-4 text-gray-800 hover:bg-gray-100"
+        class="block py-2 px-4 text-base-content hover:bg-base-200"
         {# TODO: next= params are probably not needed #}
         href="{% url "accounts:membership" %}?next={{ request.path }}"
         >
-        <span class="block text-xs text-gray-500 truncate">{{ request.membership.get_role_display }}</span>
+        <span class="block text-xs text-primary truncate">{{ request.membership.get_role_display }}</span>
         <span class="block text-xs text-gray-500 truncate">{{ request.membership.section }}</span>
       </a>
     {% elif request.all_memberships.exists %}
@@ -52,7 +52,7 @@
         <a href="{% url 'account_logout' %}"
            hx-post="{% url 'account_logout' %}"
            {% if redirect_field_value %}hx-vals='{"{{ redirect_field_name }}": "{{ redirect_field_value }}"}'{% endif %}
-           class="py-2 px-4 text-sm text-gray-700 flex flex-row justify-between items-center hover:bg-gray-100">
+           class="py-2 px-4 text-sm text-base-content flex flex-row justify-between items-center hover:bg-base-200">
           Sign out
 
           <svg xmlns="http://www.w3.org/2000/svg"

webpack/src/css/_Forms.css

@@ -33,7 +33,7 @@
     }
 
     .Forms__required-note {
-        @apply label-text-alt badge badge-accent
+        @apply label-text-alt badge badge-accent text-accent-content
     }
 
     /* standard select */