Add support for system theme (#987)

Add support for system theme

---------

Co-authored-by: Juan Mora <juan@nimble.gt>
Co-authored-by: Pēteris Caune <cuu508@gmail.com>

hc/accounts/views.py

@@ -940,7 +940,7 @@ def appearance(request: AuthenticatedHttpRequest) -> HttpResponse:
 
     if request.method == "POST":
         theme = request.POST.get("theme", "")
-        if theme in ("", "dark"):
+        if theme in ("", "dark", "system"):
             profile.theme = theme
             profile.save()
             ctx["status"] = "info"

templates/accounts/appearance.html

@@ -33,7 +33,7 @@
                     <h2>Theme</h2>
 
                     <div class="row">
-                        <div class="col-sm-6 theme">
+                        <div class="col-sm-4 theme">
                             <label for="theme-light">
                                 <img
                                     src="{% static 'img/theme-light.png' %}"
@@ -51,7 +51,7 @@
                                 Light
                             </label>
                         </div>
-                        <div class="col-sm-6 theme">
+                        <div class="col-sm-4 theme">
                             <label for="theme-dark">
                                 <img
                                     src="{% static 'img/theme-dark.png' %}"
@@ -69,7 +69,24 @@
                                 Dark
                             </label>
                         </div>
-                    </div>
+                        <div class="col-sm-4 theme">
+                            <label for="theme-system">
+                                <img
+                                    src="{% static 'img/theme-system.png' %}"
+                                    alt="System theme preview">
+                            </label>
+
+                            <label class="radio-container">
+                                <input
+                                    id="theme-system"
+                                    type="radio"
+                                    name="theme"
+                                    value="system"
+                                    {% if profile.theme == "system" %} checked {% endif %}>
+                                <span class="radiomark"></span>
+                                System
+                            </label>
+                        </div>
                 </form>
             </div>
             {% if status == "info" %}

templates/base.html

@@ -12,9 +12,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="apple-mobile-web-app-title" content="{{ site_name }}">
     <meta name="application-name" content="{{ site_name }}">
-    {% if request.user.is_authenticated and request.profile.theme == 'dark' %}
-    <meta name="theme-color" content="#18181b">
-    {% endif %}
     {% block favicon %}
     <link rel="icon" type="image/svg+xml" href="{% static 'img/favicon.svg' %}">
     {% endblock %}
@@ -224,9 +221,22 @@
             </ul>
         </div>
     </footer>
-
+    
     {% block base_modals %}{% endblock %}
 
+    {% if request.user.is_authenticated and request.profile.theme == 'system' %}
+    <script>
+        (function() {
+            const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
+            function switchColors() {
+                document.body.classList.toggle("dark", prefersDark.matches);
+            }
+            switchColors();
+            prefersDark.addEventListener("change", switchColors);
+        })();
+    </script>
+    {% endif %}
+
     {% block base_scripts %}
     {% compress js %}
     <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>