Implement dark theme

aleksis/core/preferences.py

@@ -198,6 +198,21 @@ class NotificationChannels(ChoicePreference):
     choices = get_notification_choices_lazy()
 
 
+@person_preferences_registry.register
+class Design(ChoicePreference):
+    """Change design (on supported pages)."""
+
+    section = theme
+    name = "design"
+    default = "system"
+    verbose_name = _("Select Design")
+    choices = [
+        ("system", _("System Design")),
+        ("light", _("Light mode")),
+        ("dark", _("Dark mode")),
+    ]
+
+
 @site_preferences_registry.register
 class PrimaryGroupPattern(StringPreference):
     """Regular expression to match primary group."""

aleksis/core/static/js/vue/app.js

@@ -7,11 +7,16 @@ const vuetify = new Vuetify({
         iconfont: 'mdi', // default - only for display purposes
     },
     theme: {
+        dark: JSON.parse(document.getElementById("design-mode").textContent) === "dark",
         themes: {
             light: {
                 primary: JSON.parse(document.getElementById("primary-color").textContent),
                 secondary: JSON.parse(document.getElementById("secondary-color").textContent),
             },
+            dark: {
+                primary: JSON.parse(document.getElementById("primary-color").textContent),
+                secondary: JSON.parse(document.getElementById("secondary-color").textContent),
+            },
         },
     },
 })

aleksis/core/templates/core/vue_base.html

@@ -215,6 +215,7 @@
 {% include_js "jquery-sortablejs" %}
 {{ request.site.preferences.theme__primary|json_script:"primary-color" }}
 {{ request.site.preferences.theme__secondary|json_script:"secondary-color" }}
+{{ request.user.person.preferences.theme__design|json_script:"design-mode" }}
 {#{{ request.site.preferences.all|json_script:"preferences" }}#}
 <script type="text/javascript" src="{% static 'js/search.js' %}"></script>
 <script type="text/javascript" src="{% static 'js/vue/main_vue.js' %}"></script>