Implemented theme switcher, added session theme storing/loading from profile

Author: zarya

src/profiles/apps.py

@@ -3,9 +3,11 @@
 from django.apps import AppConfig
 from django.db.models.signals import post_save
 from django.db.models.signals import pre_save
+from allauth.account.signals import user_logged_in
 
 from .signal_handlers import create_profile
 from .signal_handlers import profile_pre_save
+from .signal_handlers import set_session_on_login
 
 logger = logging.getLogger("bornhack.%s" % __name__)
 
@@ -27,3 +29,8 @@ def ready(self):
             sender="profiles.Profile",
             dispatch_uid="profile_pre_save_signal",
         )
+        user_logged_in.connect(
+            set_session_on_login,
+            sender=User,
+            dispatch_uid="profile_set_session_on_login_signal",
+        )

src/profiles/signal_handlers.py

@@ -93,3 +93,8 @@ def nickserv_username_changed(instance, original):
             # ok, mark this membership as in need of fixing
             membership.irc_acl_fix_needed = True
             membership.save()
+
+
+def set_session_on_login(sender, request, user, **kwargs):
+    # Set theme from profile
+    request.session["theme"] = request.user.profile.theme

src/profiles/urls.py

@@ -4,10 +4,12 @@
 from .views import ProfileDetail
 from .views import ProfileUpdate
 from .views import ProfilePermissionList
+from .views import ProfileSessionThemeSwitchView
 
 app_name = "profiles"
 urlpatterns = [
     path("", ProfileDetail.as_view(), name="detail"),
+    path("theme/", ProfileSessionThemeSwitchView.as_view(), name="theme"),
     path("edit/", ProfileUpdate.as_view(), name="update"),
     path("api/", ProfileApiView.as_view(), name="api"),
     path("permissions/", ProfilePermissionList.as_view(), name="permissions_list"),

src/profiles/views.py

@@ -2,10 +2,13 @@
 from django.contrib import messages
 from django.contrib.auth.models import Permission
 from django.contrib.auth.mixins import LoginRequiredMixin
+from django.http import HttpResponseForbidden
 from django.urls import reverse_lazy
+from django.shortcuts import redirect
 from django.views.generic import DetailView
 from django.views.generic import ListView
 from django.views.generic import UpdateView
+from django.views import View
 from jsonview.views import JsonView
 from oauth2_provider.views.generic import ScopedProtectedResourceView
 from leaflet.forms.widgets import LeafletWidget
@@ -57,6 +60,8 @@ def form_valid(self, form, **kwargs):
             # user changed the name (to something non blank)
             form.instance.public_credit_name_approved = False
             form.instance.save()
+        if "theme" in form.changed_data and form.cleaned_data["theme"]:
+            self.request.session["theme"] = form.cleaned_data["theme"]
         messages.success(self.request, "Your profile has been updated.")
         return super().form_valid(form, **kwargs)
 
@@ -102,3 +107,18 @@ def get_queryset(self, *args, **kwargs):
             )
         )
         return perms
+
+
+class ProfileSessionThemeSwitchView(View):
+    """
+    View for setting the Session theme
+    """
+
+    def get(self, request, *args, **kwargs):
+        theme = request.GET.get("theme") or "default"
+        next_url = request.GET.get("next") or "/"
+        if theme in dict(Profile.THEME_CHOICES) and next_url[:1] == "/":
+            self.request.session["theme"] = theme
+            return redirect(next_url)
+        else:
+            return HttpResponseForbidden()

src/static_src/css/bornhack.css

@@ -39,33 +39,42 @@ strong { font-weight: bold; }
     --bs-btn-border-width: unset !important;
 }
 
+/* Hide elements if theme is active */
+/* Only used for data-bs-theme="light" and prefers-color-scheme: dark */
+/* For the other themes these should be defined in the theme css file */
+
+body:not([data-bs-theme]) .bornhack-hide-light {
+    display: none !important;
+}
+
 [data-bs-theme="light"] .bornhack-logo {
     -webkit-filter: unset !important;
     filter: unset !important;
 }
 
+[data-bs-theme="light"] .bornhack-hide-light {
+    display: none !important;
+}
+
 @media (prefers-color-scheme: dark) {
-    .bornhack-logo {
+    body:not([data-bs-theme]) .bornhack-logo {
        -webkit-filter: invert(1);
        filter: invert(1);
     }
-    .sponsor-white {
+    body:not([data-bs-theme]) .sponsor-white {
        background-color: white;
        color: black;
        border: 20px solid white;
     }
+    body:not([data-bs-theme]) .bornhack-hide-dark {
+        display: none !important;
+    }
+    /* Unset hide when light while being dark */
+    body:not([data-bs-theme]) .bornhack-hide-light {
+        display: unset !important;
+    }
 }
-
-[data-bs-theme="dark"] .bornhack-logo {
-    -webkit-filter: invert(1);
-    filter: invert(1);
-}
-
-[data-bs-theme="dark"] .sponsor-white {
-    background-color: white;
-    color: black;
-    border: 20px solid white;
-}
+/* end of theme based hiding */
 
 .navbar-fixed-top {
   min-height: 70px;
@@ -354,46 +363,59 @@ img {
   padding-left: 10px;
   padding-right: 10px;
 }
-.bornhack-2016-gradient {
+.bornhack-2016-gradient, .bornhack-2027-gradient {
   height: 5px;
   background: linear-gradient(0.25turn, var(--bs-body-bg), #004dff, var(--bs-body-bg));
 }
-.bornhack-2017-gradient {
+.bornhack-2017-gradient, .bornhack-2028-gradient {
   height: 5px;
   background: linear-gradient(0.25turn, var(--bs-body-bg), #750787, var(--bs-body-bg));
 }
-.bornhack-2018-gradient {
+.bornhack-2018-gradient, .bornhack-2029-gradient {
   height: 5px;
   background: linear-gradient(0.25turn, var(--bs-body-bg), #008026, var(--bs-body-bg));
 }
-.bornhack-2019-gradient {
+.bornhack-2019-gradient, .bornhack-2030-gradient {
   height: 5px;
   background: linear-gradient(0.25turn, var(--bs-body-bg), #ffed00, var(--bs-body-bg));
 }
-.bornhack-2020-gradient {
+.bornhack-2020-gradient, .bornhack-2031-gradient {
   height: 5px;
   background: linear-gradient(0.25turn, var(--bs-body-bg), #ff8c00, var(--bs-body-bg));
 }
-.bornhack-2021-gradient {
+.bornhack-2021-gradient, .bornhack-2032-gradient {
   height: 5px;
   background: linear-gradient(0.25turn, var(--bs-body-bg), #e40303, var(--bs-body-bg));
 }
-.bornhack-2022-gradient {
+.bornhack-2022-gradient, .bornhack-2033-gradient {
   height: 5px;
   background: linear-gradient(0.25turn, var(--bs-body-bg), #000000, var(--bs-body-bg));
 }
-.bornhack-2023-gradient {
+.bornhack-2023-gradient, .bornhack-2034-gradient {
   height: 5px;
   background: linear-gradient(0.25turn, var(--bs-body-bg), #613915, var(--bs-body-bg));
 }
-.bornhack-2024-gradient {
+.bornhack-2024-gradient, .bornhack-2035-gradient {
   height: 5px;
   background: linear-gradient(0.25turn, var(--bs-body-bg), #73d7ee, var(--bs-body-bg));
 }
-.bornhack-2025-gradient {
+.bornhack-2025-gradient, .bornhack-2036-gradient {
   height: 5px;
   background: linear-gradient(0.25turn, var(--bs-body-bg), #ffafc7, var(--bs-body-bg));
 }
+.bornhack-2026-gradient, .bornhack-2037-gradient {
+  height: 5px;
+  background: linear-gradient(0.25turn, var(--bs-body-bg), #ffffff, var(--bs-body-bg));
+}
+/* Use a different starting and ending color on light theme */
+[data-bs-theme="light"] .bornhack-2026-gradient, [data-bs-theme="light"] .bornhack-2037-gradient {
+  background: linear-gradient(0.25turn, var(--bs-gray-400), #ffffff, var(--bs-gray-400)) !important;
+}
+@media (prefers-color-scheme: light) {
+    .bornhack-2026-gradient, .bornhack-2037-gradient {
+      background: linear-gradient(0.25turn, var(--bs-gray-400), #ffffff, var(--bs-gray-400)) !important;
+    }
+}
 .image-white-bg {
     background-color: white;
     color: black;

src/static_src/css/theme-slate.css

@@ -62,4 +62,8 @@
         color: black;
         border: 20px solid white;
     }
+
+    .bornhack-hide-dark {
+        display: none !important;
+    }
 }

src/templates/base.html

@@ -66,7 +66,7 @@
     {% endblock %}
   </head>
 
-  <body class="no-js" hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' {% if user.is_authenticated and user.profile.theme != "default" %} data-bs-theme="{{user.profile.theme}}"{% endif %}>
+  <body class="no-js" hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' {% if request.session.theme and request.session.theme != "default" %} data-bs-theme="{{request.session.theme}}"{% endif %}>
     {% block body %}
       <header class="py-1">
         <nav class="navbar fixed-top navbar-expand-lg bg-body">
@@ -80,6 +80,11 @@
                 <img src="{% static 'img/logo-small.png' %}" alt="bornhack" class="bornhack-logo img-responsive" width="200">
               </a>
             {% endif %}
+            <!-- Theme switcher for small screens -->
+            <div class="theme-switch d-lg-none col-1">
+              {% include 'includes/theme-switch.html' %}
+            </div>
+            <!-- END: Theme switcher for small screens -->
             <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#top-navbar" aria-expanded="false" aria-controls="navbar" aria-label="Toggle navigation">
               <span class="navbar-toggler-icon"></span>
             </button>
@@ -126,6 +131,11 @@
                 {% endif %}
               </ul>
               <div class="nav navbar-nav navbar-right ms-auto d-none d-lg-flex">
+                <!-- normal/big screen switcher -->
+                <div class="theme-switch nav-link">
+                  {% include 'includes/theme-switch.html' %}
+                </div>
+                <!-- end of switcher -->
                 {% if user.is_authenticated %}
                   <li class="nav-item unhide-for-no-js-users"><a class="nav-link" href="{% url 'profiles:detail' %}">Profile</a></li>
                   <li class="nav-item unhide-for-no-js-users"><a class="nav-link" href="{% url 'account_logout' %}">Logout</a></li>

src/templates/includes/theme-switch.html

@@ -0,0 +1,11 @@
+<a href="{% url 'profiles:theme' %}?theme=slate&next={{ request.get_full_path|urlencode }}" title="Use dark mode" id="dark" class="btn btn-sm btn-default text-secondary bornhack-hide-dark">
+  <i class="fa fa-moon"></i>
+</a>
+<a href="{% url 'profiles:theme' %}?theme=light&next={{ request.get_full_path|urlencode }}" title="Use light mode" id="light" class="btn btn-sm btn-default text-secondary bornhack-hide-light">
+  <i class="fa fa-sun"></i>
+</a>
+{% if request.session.theme and request.session.theme != "default" %}
+  <a href="{% url 'profiles:theme' %}?theme=default&next={{ request.get_full_path|urlencode }}" title="Use system preferred mode" id="system" class="btn btn-sm btn-default text-secondary">
+    <i class="fa fa-display"></i>
+  </a>
+{% endif %}