feat: dark mode switcher (#43)

unfoldadmin · Jan 14, 2023 · 4359cea · 4359cea
1 parent c6c6692
commit 4359cea
Show file tree

Hide file tree

Showing 14 changed files with 94 additions and 61 deletions.
diff --git a/src/unfold/static/unfold/css/styles.css b/src/unfold/static/unfold/css/styles.css
diff --git a/src/unfold/static/unfold/js/alpine.persist.js b/src/unfold/static/unfold/js/alpine.persist.js
diff --git a/src/unfold/templates/admin/actions.html b/src/unfold/templates/admin/actions.html
@@ -19,7 +19,7 @@
             {% endblock %}
 
             {% block actions-submit %}
-                <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 }}">
+                <button type="submit" class="bg-white border flex items-center h-9.5 ml-1 px-2 rounded shadow-sm text-gray-400 w-9.5 hover:text-primary-600 focus:outline-none dark:bg-gray-900 dark:border-gray-700 dark:text-gray-500 dark:hover:text-primary-600" title="{% translate "Run the selected action" %}" name="index" value="{{ action_index|default:0 }}">
                     <span class="material-symbols-outlined md-18">chevron_right</span>
                 </button>
             {% endblock %}

diff --git a/src/unfold/templates/admin/base.html b/src/unfold/templates/admin/base.html
@@ -13,9 +13,9 @@
         <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 dark:border-gray-800">
-                        <div class="container mx-auto">
-                            <div id="header-inner" class="flex items-center">
+                    <div class="border-b 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">
                                     {% block usertools %}
                                         {% if has_permission %}

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 transition-all hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-gray-200">
+    <a href="{% add_preserved_filters history_url %}" class="historylink mx-1 px-3 py-2 rounded-md transition-all hover:bg-gray-100 hover:text-gray-700 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 transition-all hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-gray-200">
+        <a href="{{ absolute_url }}" class="viewsitelink mx-1 px-3 py-2 rounded-md transition-all hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-200">
             {% trans 'View on site' %}
         </a>
     {% endif %}

diff --git a/src/unfold/templates/admin/change_list_object_tools.html b/src/unfold/templates/admin/change_list_object_tools.html
@@ -2,10 +2,12 @@
 
 {% block object-tools-items %}
     {% if has_add_permission %}
-        <li>
-            {% url cl.opts|admin_urlname:'add' as add_url %}
+        <li class="flex flex-row items-center">
+            {% url cl.opts|admin_urlname:"add" as add_url %}
 
-            <a href="{% add_preserved_filters add_url is_popup to_field %}" class="addlink bg-primary-600 block flex items-center h-10 justify-center -my-1 rounded-full w-10" title="{% blocktranslate with cl.opts.verbose_name as name %}Add {{ name }}{% endblocktranslate %}">
+            <span class="block bg-gray-200 h-5 mr-4 w-px dark:bg-gray-700"></span>
+
+            <a href="{% add_preserved_filters add_url is_popup to_field %}" class="addlink bg-primary-600 block flex items-center h-9 justify-center -my-1 rounded-full w-9" title="{% blocktranslate with cl.opts.verbose_name as name %}Add {{ name }}{% endblocktranslate %}">
                 <span class="material-symbols-outlined text-white">add</span>
             </a>
         </li>

diff --git a/src/unfold/templates/admin/widgets/related_widget_wrapper.html b/src/unfold/templates/admin/widgets/related_widget_wrapper.html
@@ -9,41 +9,41 @@
                 {% if not is_hidden %}
                     {% if can_add_related or can_change_related or can_delete_related or can_view_related%}
                         {% if can_change_related %}
-                            <a class="related-widget-wrapper-link change-related block border cursor-pointer flex items-center h-9.5 justify-center ml-2 rounded shadow-sm shrink-0 text-gray-300 text-sm transition-colors w-9.5 hover:text-primary-600 dark:border-gray-700 dark:text-gray-500"
+                            <a class="related-widget-wrapper-link change-related block border cursor-pointer flex items-center h-9.5 justify-center ml-2 rounded shadow-sm shrink-0 text-gray-400 text-sm transition-colors w-9.5 hover:text-primary-600 dark:border-gray-700 dark:text-gray-500 dark:hover:text-primary-600"
                                id="change_id_{{ name }}"
                                data-popup="yes"
                                data-href-template="{{ change_related_template_url }}?{{ url_params }}"
                                title="{% blocktranslate %}Change selected {{ model }}{% endblocktranslate %}">
-                                <span class="material-symbols-outlined text-base">edit</span>
+                                <span class="material-symbols-outlined text-sm">edit</span>
                             </a>
                         {% endif %}
 
                         {% if can_add_related %}
-                            <a class="related-widget-wrapper-link add-related block border cursor-pointer flex items-center h-9.5 justify-center ml-2 rounded shadow-sm shrink-0 text-gray-300 text-sm transition-colors w-9.5 hover:text-primary-600 dark:border-gray-700 dark:text-gray-500"
+                            <a class="related-widget-wrapper-link add-related block border cursor-pointer flex items-center h-9.5 justify-center ml-2 rounded shadow-sm shrink-0 text-gray-400 text-sm transition-colors w-9.5 hover:text-primary-600 dark:border-gray-700 dark:text-gray-500 dark:hover:text-primary-600"
                                data-popup="yes"
                                id="add_id_{{ name }}"
                                 href="{{ add_related_url }}?{{ url_params }}"
                                 title="{% blocktranslate %}Add another {{ model }}{% endblocktranslate %}">
-                                <span class="material-symbols-outlined text-base">add</span>
+                                <span class="material-symbols-outlined text-sm">add</span>
                             </a>
                         {% endif %}
 
                         {% if can_view_related %}
-                            <a class="related-widget-wrapper-link view-related block border cursor-pointer flex items-center h-9.5 justify-center ml-2 rounded shadow-sm shrink-0 text-gray-300 text-sm transition-colors w-9.5 hover:text-primary-600 dark:border-gray-700 dark:text-gray-500"
+                            <a class="related-widget-wrapper-link view-related block border cursor-pointer flex items-center h-9.5 justify-center ml-2 rounded shadow-sm shrink-0 text-gray-400 text-sm transition-colors w-9.5 hover:text-primary-600 dark:border-gray-700 dark:text-gray-500 dark:hover:text-primary-600"
                                id="view_id_{{ name }}"
                                data-href-template="{{ change_related_template_url }}?{{ view_related_url_params }}"
                                title="{% blocktranslate %}View selected {{ model }}{% endblocktranslate %}">
-                                <span class="material-symbols-outlined text-base">visibility</span>
+                                <span class="material-symbols-outlined text-sm">visibility</span>
                             </a>
                         {% endif %}
 
                         {% if can_delete_related %}
-                            <a class="related-widget-wrapper-link delete-related block border cursor-pointer flex items-center h-9.5 justify-center ml-2 rounded shadow-sm shrink-0 text-gray-300 text-sm transition-colors w-9.5 hover:text-primary-600 dark:border-gray-700 dark:text-gray-500"
+                            <a class="related-widget-wrapper-link delete-related block border cursor-pointer flex items-center h-9.5 justify-center ml-2 rounded shadow-sm shrink-0 text-red-600 text-sm transition-colors w-9.5 dark:border-gray-700 dark:text-red-500"
                                id="delete_id_{{ name }}"
                                 data-href-template="{{ delete_related_template_url }}?{{ url_params }}"
                                 data-popup="yes"
                                 title="{% blocktranslate %}Delete selected {{ model }}{% endblocktranslate %}">
-                                <span class="material-symbols-outlined text-base">delete</span>
+                                <span class="material-symbols-outlined text-sm">delete</span>
                             </a>
                         {% endif %}
                     {% endif %}

diff --git a/src/unfold/templates/unfold/helpers/app_list.html b/src/unfold/templates/unfold/helpers/app_list.html
@@ -17,7 +17,7 @@ <h3 class="font-medium my-3 px-6 text-gray-900 text-sm first:mt-0 dark:text-gray
                 {% for item in group.items %}
                     <li>
                         <a href="{{ item.link }}"
-                           class="block border border-transparent flex h-11 items-center -mx-3 px-3 py-2 rounded-md transition-all {% if item.active %}bg-gray-100 font-semibold text-primary-600 dark:border dark:border-gray-800 dark:bg-white/[.02] dark:text-primary-500{% else %}text-gray-500 hover:text-gray-700 dark:text-gray-400 hover:dark:text-gray-200{% endif %}">
+                           class="block border border-transparent flex h-11 items-center -mx-3 px-3 py-2 rounded-md {% if item.active %}bg-gray-100 font-semibold text-primary-600 dark:border dark:border-gray-800 dark:bg-white/[.02] dark:text-primary-500{% else %}text-gray-500 hover:text-gray-700 dark:text-gray-400 hover:dark:text-gray-200{% endif %}">
                             {% if item.icon %}
                                 <span class="material-symbols-outlined md-18 mr-3">
                                     {{ item.icon }}

diff --git a/src/unfold/templates/unfold/helpers/avatar.html b/src/unfold/templates/unfold/helpers/avatar.html
diff --git a/src/unfold/templates/unfold/helpers/tab_list.html b/src/unfold/templates/unfold/helpers/tab_list.html
@@ -5,7 +5,7 @@
                 <ul class="border rounded-md flex flex-col w-full md:flex-row md:border-b-0 md:border-t-0 md:border-l-0 md:border-r-0 dark:border-gray-800">
                     {% for item in tab_list %}
                         <li class="border-b last:border-b-0 md:border-b-0 md:mr-8 dark:border-gray-800">
-                            <a href="{{ item.link }}" class="block px-3 py-2 transition-colors{% if item.link|stringformat:"s" in request.path %} border-b md:border-primary-600 font-medium -mb-px text-primary-600 hover:text-primary-600{% else %} hover:text-gray-700 dark:hover:text-gray-200{% endif %} md:py-4 md:px-0 dark:border-gray-800">
+                            <a href="{{ item.link }}" class="block px-3 py-2 transition-colors{% if item.link|stringformat:"s" in request.path %} border-b md:border-primary-600 dark:md:border-primary-600 font-medium -mb-px text-primary-600 hover:text-primary-600{% else %} hover:text-gray-700 dark:hover:text-gray-200{% endif %} md:py-4 md:px-0 dark:border-gray-800">
                                 {{ item.title }}
                             </a>
                         </li>

diff --git a/src/unfold/templates/unfold/helpers/userlinks.html b/src/unfold/templates/unfold/helpers/userlinks.html
@@ -1,40 +1,75 @@
 {% load i18n static %}
 
 <div class="flex items-center ml-auto">
-    <div class="flex group items-center relative" x-data="{ openUserLinks: false }">
-        <div @click="openUserLinks = !openUserLinks">
-            {% include 'unfold/helpers/avatar.html' with initials=request.user.get_initials|default:'<i class="material-symbols-outlined text-gray-400">person</i>' image=request.user.get_photo %}
-        </div>
+    <div class="flex flex-row group items-center leading-none relative" x-data="{ openUserLinks: false, openTheme: false }">
+        <div class="flex flex-row text-gray-500">
+            <div class="mr-4 relative">
+                <a class="block cursor-pointer hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200" x-on:click="openTheme = !openTheme">
+                    <span class="material-symbols-outlined">
+                        <span x-text="theme.value == 'dark' && 'dark_mode' || theme.value == 'light' && 'light_mode' || 'computer'"></span>
+                    </span>
+                </a>
 
-        <nav class="absolute bg-white border flex flex-col leading-none overflow-hidden py-1 right-0 rounded shadow-lg text-sm text-gray-500 top-10 w-52 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400" x-cloak x-show="openUserLinks" @click.outside="openUserLinks = false">
-            <div class="border-b border-gray-100 flex flex-row flex-shrink-0 items-start justify-start mb-1 pb-1 dark:border-gray-700">
-                <span class="block mx-1 px-3 py-2 truncate">
-                    {% firstof user.get_short_name user.get_username %}
-                </span>
-            </div>
+                <nav class="absolute bg-white border flex flex-col leading-none overflow-hidden py-1 -right-2 rounded shadow-lg text-sm text-gray-500 top-7 w-40 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400" x-cloak x-show="openTheme" @click.outside="openTheme = false">
+                    <a class="block cursor-pointer flex flex-row leading-none mx-1 px-3 py-1.5 rounded hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-200"
+                       x-on:click="theme.value = 'dark'"
+                       x-bind:class="theme.value == 'dark' && 'text-primary-600 hover:!text-primary-600'">
+                        <span class="material-symbols-outlined mr-2">dark_mode</span>
+                        <span class="leading-none self-center">{% trans "Dark" %}</span>
+                    </a>
 
-            {% if nav_global %}
-                {{ nav_global }}
-            {% endif %}
+                    <a class="block cursor-pointer flex flex-row mx-1 px-3 py-1.5 rounded hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-200"
+                       x-on:click="theme.value = 'light'"
+                       x-bind:class="theme.value == 'light'  && 'text-primary-600 hover:!text-primary-600'">
+                        <span class="material-symbols-outlined mr-2">light_mode</span>
+                        <span class="leading-none self-center">{% trans "Light" %}</span>
+                    </a>
 
-            {% if site_url %}
-                <a href="{{ site_url }}" class="mx-1 px-3 py-2 rounded transition-all hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-gray-200">
-                    {% translate 'View site' %}
-                </a>
-            {% endif %}
+                    <a class="block cursor-pointer flex flex-row mx-1 px-3 py-1.5 rounded hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-200"
+                       x-on:click="theme.value = 'auto'"
+                       x-bind:class="theme.value == 'auto' && 'text-primary-600 hover:!text-primary-600'">
+                        <span class="material-symbols-outlined mr-2">computer</span>
+                        <span class="leading-none self-center">{% trans "System" %}</span>
+                    </a>
+                </nav>
+            </div>
 
-            {% if user.has_usable_password %}
-                <a href="{% url 'admin:password_change' %}" class="mx-1 px-3 py-2 rounded transition-all hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-gray-200">
-                    {% translate 'Change password' %}
+            <div class="relative">
+                <a class="block cursor-pointer hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200" @click="openUserLinks = !openUserLinks">
+                    <span class="material-symbols-outlined">person</span>
                 </a>
-            {% endif %}
 
-            <div class="border-t mt-1 pt-1 dark:border-gray-700">
-                <a href="{% url 'admin:logout' %}" class="bg-none block mx-1 px-3 py-2 text-red-500 rounded transition-all hover:bg-red-100 dark:hover:bg-red-500/20 dark:hover:text-red-500">
-                    {% translate 'Log out' %}
-                </a>
+                <nav class="absolute bg-white border flex flex-col leading-none overflow-hidden py-1 -right-2 rounded shadow-lg text-sm text-gray-500 top-7 w-52 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400" x-cloak x-show="openUserLinks" @click.outside="openUserLinks = false">
+                    <div class="border-b border-gray-100 flex flex-row flex-shrink-0 items-start justify-start mb-1 pb-1 dark:border-gray-700">
+                        <span class="block mx-1 px-3 py-2 truncate">
+                            {% firstof user.get_short_name user.get_username %}
+                        </span>
+                    </div>
+
+                    {% if nav_global %}
+                        {{ nav_global }}
+                    {% endif %}
+
+                    {% if site_url %}
+                        <a href="{{ site_url }}" class="mx-1 px-3 py-2 rounded hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-200">
+                            {% translate 'View site' %}
+                        </a>
+                    {% endif %}
+
+                    {% if user.has_usable_password %}
+                        <a href="{% url 'admin:password_change' %}" class="mx-1 px-3 py-2 rounded hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-200">
+                            {% translate 'Change password' %}
+                        </a>
+                    {% endif %}
+
+                    <div class="border-t mt-1 pt-1 dark:border-gray-700">
+                        <a href="{% url 'admin:logout' %}" class="bg-none block mx-1 px-3 py-2 text-red-500 rounded hover:bg-red-100 dark:hover:bg-red-500/20 dark:hover:text-red-500">
+                            {% translate 'Log out' %}
+                        </a>
+                    </div>
+                </nav>
             </div>
-        </nav>
+        </div>
     </div>
 
     {% if nav_global_side %}

diff --git a/src/unfold/templates/unfold/layouts/skeleton.html b/src/unfold/templates/unfold/layouts/skeleton.html
@@ -11,7 +11,7 @@
 {% capture as nav_global_side silent %}{% block nav-global-side %}{% endblock %}{% endcapture %}
 
 <!DOCTYPE html>
-<html lang="{{ LANGUAGE_CODE|default:"en-us" }}" dir="{{ LANGUAGE_BIDI|yesno:"rtl,ltr,auto" }}">
+<html lang="{{ LANGUAGE_CODE|default:"en-us" }}" dir="{{ LANGUAGE_BIDI|yesno:"rtl,ltr,auto" }}" x-data="{ theme: $persist({'value': 'auto'}).as('theme') }" x-bind:class="theme.value && theme.value" x-cloak>
 
 <head>
     <title>{% block title %}{% endblock %}</title>
@@ -27,6 +27,7 @@
     <link href="{% static 'unfold/css/simplebar.css' %}" rel="stylesheet">
 
     <script src="{% static 'unfold/js/simplebar.js' %}"></script>
+    <script src="{% static 'unfold/js/alpine.persist.js' %}" defer></script>
     <script src="{% static 'unfold/js/alpine.js' %}" defer></script>
     <script src="{% static 'unfold/js/htmx.js' %}"></script>
     <script src="{% static 'unfold/js/app.js' %}"></script>