Theme Toggling Feature

pontoon/base/forms.py

@@ -221,6 +221,7 @@ class Meta:
             "chat",
             "github",
             "bugzilla",
+            "theme",
         )
 
 

pontoon/base/migrations/0047_userprofile_themes.py

@@ -0,0 +1,22 @@
+# Generated by Django 3.2.15 on 2023-10-02 03:49
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("base", "0046_projectslughistory"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="userprofile",
+            name="themes",
+            field=models.CharField(
+                choices=[("Dark", "Dark"), ("Light", "Light"), ("System", "System")],
+                default="Dark",
+                max_length=20,
+            ),
+        ),
+    ]

pontoon/base/migrations/0048_rename_themes_userprofile_theme.py

@@ -0,0 +1,18 @@
+# Generated by Django 3.2.15 on 2023-10-02 19:34
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("base", "0047_userprofile_themes"),
+    ]
+
+    operations = [
+        migrations.RenameField(
+            model_name="userprofile",
+            old_name="themes",
+            new_name="theme",
+        ),
+    ]

pontoon/base/models.py

@@ -1569,11 +1569,18 @@ class UserProfile(models.Model):
         User, models.CASCADE, related_name="profile", primary_key=True
     )
 
+    # Themes
+    class Themes(models.TextChoices):
+        DARK = "Dark", "Dark"
+        LIGHT = "Light", "Light"
+        SYSTEM = "System", "System"
+
     # Personal information
     username = models.SlugField(unique=True, blank=True, null=True)
     contact_email = models.EmailField("Contact email address", blank=True, null=True)
     contact_email_verified = models.BooleanField(default=False)
     bio = models.TextField(max_length=160, blank=True, null=True)
+    theme = models.CharField(choices=Themes.choices, max_length=20, default=Themes.DARK)
 
     # External accounts
     chat = models.CharField("Chat username", max_length=255, blank=True, null=True)

pontoon/base/static/css/dark-theme.css

@@ -1,5 +1,5 @@
 /* Dark Theme Variables */
-:root {
+.dark-theme {
   --black-1: #1c1e21;
   --black-2: #000000;
   --black-3: #272a2f;

pontoon/base/static/css/light-theme.css

@@ -0,0 +1,12 @@
+/* Light Theme Variables */
+.light-theme {
+  --dark-grey-2: #fbfbfb;
+  --dark-grey-1: #eee;
+  --light-grey-7: #aaaaaa;
+  --grey-3: #eee;
+  --light-grey-1: #e8e8e8;
+  --white-1: #222;
+  --white-3: #222;
+  --light-grey-7: #888;
+  --light-grey-2: #888888;
+}

pontoon/base/static/css/toggle.css

@@ -21,7 +21,7 @@
   border-bottom-right-radius: 0;
 }
 
-.toggle-button button:nth-child(2) {
+.toggle-button button:last-child {
   border-left: none;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;

pontoon/base/static/js/theme-switcher.js

@@ -0,0 +1,83 @@
+document.addEventListener('DOMContentLoaded', function () {
+  const themeHiddenInput = document.querySelector('[name="theme"]');
+  const darkButton = document.querySelector('.dark');
+  const lightButton = document.querySelector('.light');
+  const systemButton = document.querySelector('.system');
+
+  if (!themeHiddenInput || !darkButton || !lightButton || !systemButton) {
+    console.error('Theme elements not found!');
+    return;
+  }
+
+  darkButton.addEventListener('click', function () {
+    applyTheme('Dark');
+  });
+
+  lightButton.addEventListener('click', function () {
+    applyTheme('Light');
+  });
+
+  systemButton.addEventListener('click', function () {
+    applyTheme('System');
+  });
+});
+
+function applyTheme(theme) {
+  const bodyElement = document.body;
+  const themeHiddenInput = document.querySelector('[name="theme"]');
+
+  // Remove all theme classes first
+  bodyElement.classList.remove('dark-theme', 'light-theme');
+
+  if (theme === 'Dark') {
+    bodyElement.classList.add('dark-theme');
+  } else if (theme === 'Light') {
+    bodyElement.classList.add('light-theme');
+  } else if (theme === 'System') {
+    if (
+      window.matchMedia &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches
+    ) {
+      bodyElement.classList.add('dark-theme');
+    } else {
+      bodyElement.classList.add('light-theme');
+    }
+  }
+
+  // Update hidden input value
+  themeHiddenInput.value = theme;
+}
+
+// document.addEventListener('DOMContentLoaded', function() {
+//     const themeSelector = document.querySelector('[name="themes"]');
+
+//     if (!themeSelector) {
+//         console.error('Theme selector not found!');
+//         return;
+//     }
+
+//     themeSelector.addEventListener('change', function() {
+//         applyTheme(this.value);
+//     });
+// });
+
+// function applyTheme(theme) {
+//     alert("Hello")
+//     const bodyElement = document.body;
+
+//     if (theme === 'Dark') {
+//         bodyElement.classList.add('dark-theme');
+//         bodyElement.classList.remove('light-theme');
+//     } else if (theme === 'Light') {
+//         bodyElement.classList.add('light-theme');
+//         bodyElement.classList.remove('dark-theme');
+//     } else if (theme === 'System') {
+//         if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+//             bodyElement.classList.add('dark-theme');
+//             bodyElement.classList.remove('light-theme');
+//         } else {
+//             bodyElement.classList.add('light-theme');
+//             bodyElement.classList.remove('dark-theme');
+//         }
+//     }
+// }

pontoon/base/templates/base.html

@@ -33,9 +33,14 @@
   </head>
 
   <body
-    class="{% block class %}{% endblock %}"
+    class="{% block class %}{% endblock %} {% if request.user.is_authenticated %}
+        {% if request.user.profile.theme == 'Light' %}light-theme{% elif request.user.profile.theme == 'Dark' %}dark-theme{% else %}system-theme{% endif %}
+    {% else %}
+        system-theme
+    {% endif %}"
     {% if csrf_token %}data-csrf="{{ csrf_token }}"{% endif %}
-  >
+>
+
     {% block content %}
 
       {% include "addon_promotion.html" %}

pontoon/base/templates/django/base.html

@@ -13,12 +13,14 @@
     <meta name="description" content="Mozilla’s Localization Platform">
     <meta name="author" content="Mozilla">
     <meta name="color-scheme" content="only light">
+    <link rel="stylesheet" href="{% static 'css/dark-theme.css' %}" title="" type="text/css" />
+    <link rel="stylesheet" href="{% static 'css/light-theme.css' %}" title="" type="text/css"/>
     <link rel="stylesheet" href="{% static 'css/fontawesome-all.css' %}" title="" type="text/css" />
     <link rel="stylesheet" href="{% static 'css/nprogress.css' %}" title="" type="text/css" />
     <link rel="stylesheet" href="{% static 'css/fonts.css' %}" title="" type="text/css" />
     <link rel="stylesheet" href="{% static 'css/boilerplate.css' %}" title="" type="text/css" />
     <link rel="stylesheet" href="{% static 'css/style.css' %}" title="" type="text/css" />
-    <link rel="stylesheet" href="{% static 'css/dark-theme.css' %}" title="" type="text/css" />
+
 
     {% include "tracker.html" %}
 
@@ -121,5 +123,6 @@
     <script type="text/javascript" charset="utf-8" src="{% static 'js/lib/jquery-3.6.1.js' %}"></script>
     <script type="text/javascript" charset="utf-8" src="{% static 'js/lib/nprogress.js' %}"></script>
     <script type="text/javascript" charset="utf-8" src="{% static 'js/main.js' %}"></script>
+    <script type="text/javascript" charset="utf-8" src="{% static 'js/theme-switcher.js' %}"></script>
   </body>
 </html>

pontoon/contributors/static/css/settings.css

@@ -129,6 +129,26 @@
   font-style: italic;
 }
 
+#main .appearance .field .help {
+  margin-left: 0;
+}
+
+#main .appearance .toggle-button button {
+  width: 207px;
+}
+
+#main .appearance .toggle-button button:first-child {
+  margin-right: -1px;
+}
+
+#main .appearance .toggle-button button:nth-child(2) {
+  border-radius: 0;
+}
+
+#main .appearance .toggle-button button .icon {
+  margin-right: 10px;
+}
+
 #main .field .verify {
   color: var(--light-green-1);
   font-style: italic;

pontoon/contributors/templates/contributors/settings.html

@@ -64,6 +64,19 @@ <h3>Personal information</h3>
         </div>
       </section>
 
+   <section class="appearance" >
+        <input type="hidden" name="{{ user_profile_form.theme.name }}" id="{{ user_profile_form.theme.id_for_label }}" value="{{ user_profile_form.theme.value }}">
+        <h3>Appearance</h3>
+        <span class="toggle-button">
+            <button type="button" class="dark active" title="Dark theme"><i class="icon far fa-moon"></i>Dark theme</button>
+            <button type="button" class="light" title="Light theme"><i class="icon fa fa-sun"></i>Light theme</button>
+            <button type="button" class="system" title="System theme"><i class="icon fa fa-laptop"></i>Match system</button>
+        </span>
+        <div class="field">
+            <p class="help">Choose if Pontoon’s appearance should be dark, light, or follow your system’s settings</a></p>
+        </div>
+    </section>
+
     <section>
         <h3>External accounts</h3>
         <div class="field">
@@ -160,4 +173,5 @@ <h3><span class="small stress">Preferred locales to get suggestions from</span><
 
 {% block extend_js %}
   {% javascript 'settings' %}
+  {% javascript 'theme-switcher' %}
 {% endblock %}

pontoon/contributors/views.py

@@ -250,6 +250,11 @@ def settings(request):
             request.POST,
             instance=profile,
         )
+        theme = request.POST.get("theme", None)
+        if theme:
+            if theme in ["Light", "Dark", "System"]:
+                profile.theme = theme
+                profile.save()
 
         if (
             locales_form.is_valid()

pontoon/settings/base.py

@@ -363,6 +363,7 @@ def _default_from_email():
     "base": {
         "source_filenames": (
             "css/dark-theme.css",
+            "css/light-theme.css",
             "css/fontawesome-all.css",
             "css/nprogress.css",
             "css/boilerplate.css",
@@ -515,6 +516,7 @@ def _default_from_email():
             "js/lib/jquery.color-2.1.2.js",
             "js/lib/nprogress.js",
             "js/main.js",
+            "js/theme-switcher.js",
         ),
         "output_filename": "js/base.min.js",
     },