Initial theme switcher

src/profiles/urls.py

@@ -4,11 +4,13 @@
 from .views import ProfileDetail
 from .views import ProfileUpdate
 from .views import ProfilePermissionList
+from .views import ProfileThemeSelectView
 
 app_name = "profiles"
 urlpatterns = [
     path("", ProfileDetail.as_view(), name="detail"),
     path("edit/", ProfileUpdate.as_view(), name="update"),
     path("api/", ProfileApiView.as_view(), name="api"),
     path("permissions/", ProfilePermissionList.as_view(), name="permissions_list"),
+    path("set_theme/<str:theme>/", ProfileThemeSelectView.as_view(), name="set_theme"),
 ]

src/profiles/views.py

@@ -3,9 +3,12 @@
 from django.contrib.auth.models import Permission
 from django.contrib.auth.mixins import LoginRequiredMixin
 from django.urls import reverse_lazy
+from django.views import View
 from django.views.generic import DetailView
 from django.views.generic import ListView
 from django.views.generic import UpdateView
+from django.http import HttpResponseRedirect
+
 from jsonview.views import JsonView
 from oauth2_provider.views.generic import ScopedProtectedResourceView
 
@@ -83,3 +86,16 @@ def get_queryset(self, *args, **kwargs):
             )
         )
         return perms
+
+
+class ProfileThemeSelectView(View):
+    def get(self, request, *args, **kwargs):
+        request.session["theme"] = self.kwargs["theme"]
+        if self.request.user.is_authenticated and self.kwargs["theme"] in [
+            "light",
+            "slate",
+            "default",
+        ]:
+            self.request.user.profile.theme = self.kwargs["theme"]
+            self.request.user.profile.save()
+        return HttpResponseRedirect(request.headers["referer"])

src/templates/base.html

@@ -15,6 +15,8 @@
     {# Load Bootstrap CSS and JavaScript #}
     {% if user.is_authenticated and user.profile.theme != "default" %}
       <link href="{% static "css/bootstrap-"|add:user.profile.theme|add:".css" %}" rel="stylesheet">
+    {% elif not user.is_authenticated and request.session.theme|default:"default" != "default" %}
+      <link href="{% static "css/bootstrap-"|add:request.session.theme|add:".css" %}" rel="stylesheet">
     {% else %}
       <link href="{% static 'css/bootstrap-light.css' %}" rel="stylesheet">
       <link href="{% static 'css/bootstrap-slate.css' %}" rel="stylesheet" media="(prefers-color-scheme: dark)">
@@ -155,6 +157,7 @@
                 {% else %}
                   <a class="nav-link" href="{% url 'account_login' %}">Login</a>
                 {% endif %}
+                {% include 'includes/darkswitch.html' %}
               </div>
             </div>
           </div>

src/templates/includes/darkswitch.html

@@ -0,0 +1,32 @@
+<div class="dropdown hide-for-no-js-users d-none d-lg-flex">
+  <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+    {% if user.is_authenticated and user.profile.theme == "light" %}
+      <i class="fa-regular fa-sun"></i>
+    {% elif user.is_authenticated and user.profile.theme == "slate" %}
+      <i class="fa-solid fa-moon"></i>
+    {% elif not user.is_authenticated and request.session.theme|default:"default" == "slate" %}
+      <i class="fa-solid fa-moon"></i>
+    {% elif not user.is_authenticated and request.session.theme|default:"default" == "light" %}
+      <i class="fa-regular fa-sun"></i>
+    {% else %}
+      <i class="fa-solid fa-circle-half-stroke"></i>
+    {% endif %}
+  </a>
+  <ul class="dropdown-menu">
+    <li><a class="dropdown-item" href="{% url 'profiles:set_theme' theme="light" %}"><i class="fa-regular fa-sun"></i> Light</a></li>
+    <li><a class="dropdown-item" href="{% url 'profiles:set_theme' theme="slate" %}"><i class="fa-solid fa-moon"></i> Dark</a></li>
+    <li><hr class="dropdown-divider"></li>
+    <li><a class="dropdown-item" href="{% url 'profiles:set_theme' theme="default" %}"><i class="fa-solid fa-circle-half-stroke"></i> Auto</a></li>
+  </ul>
+</div>
+{% if user.is_authenticated and user.profile.theme == "light" %}
+  <li class="nav-item unhide-for-no-js-users d-lg-none"><a class="nav-link" href="{% url 'profiles:set_theme' theme="default" %}"><i class="fa-solid fa-circle-half-stroke"></i></a></li>
+{% elif user.is_authenticated and user.profile.theme == "slate" %}
+  <li class="nav-item unhide-for-no-js-users d-lg-none"><a class="nav-link" href="{% url 'profiles:set_theme' theme="light" %}"><i class="fa-regular fa-sun"></i></a></li>
+{% elif not user.is_authenticated and request.session.theme|default:"default" == "light" %}
+  <li class="nav-item unhide-for-no-js-users d-lg-none"><a class="nav-link" href="{% url 'profiles:set_theme' theme="default" %}"><i class="fa-solid fa-circle-half-stroke"></i></a></li>
+{% elif not user.is_authenticated and request.session.theme|default:"default" == "slate" %}
+  <li class="nav-item unhide-for-no-js-users d-lg-none"><a class="nav-link" href="{% url 'profiles:set_theme' theme="light" %}"><i class="fa-regular fa-sun"></i></a></li>
+{% else %}
+  <li class="nav-item unhide-for-no-js-users d-lg-none"><a class="nav-link" href="{% url 'profiles:set_theme' theme="slate" %}"><i class="fa-solid fa-moon"></i></a></li>
+{% endif %}