mozilla · ayanaar · Oct 3, 2023 · Oct 3, 2023 · Oct 3, 2023 · Oct 3, 2023
diff --git a/pontoon/base/forms.py b/pontoon/base/forms.py
@@ -221,6 +221,7 @@ class Meta:
             "chat",
             "github",
             "bugzilla",
+            "theme",
         )
 
 

diff --git a/pontoon/base/migrations/0047_userprofile_theme.py b/pontoon/base/migrations/0047_userprofile_theme.py
@@ -0,0 +1,22 @@
+# Generated by Django 3.2.15 on 2023-10-03 16:56
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("base", "0046_projectslughistory"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="userprofile",
+            name="theme",
+            field=models.CharField(
+                choices=[("dark", "Dark"), ("light", "Light"), ("system", "System")],
+                default="dark",
+                max_length=20,
+            ),
+        ),
+    ]
diff --git a/pontoon/base/models.py b/pontoon/base/models.py
@@ -1569,12 +1569,21 @@ 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
+    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)
     github = models.CharField("GitHub username", max_length=255, blank=True, null=True)

diff --git a/pontoon/base/static/css/dark-theme.css b/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;

diff --git a/pontoon/base/static/css/light-theme.css b/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;
+}
diff --git a/pontoon/base/static/css/toggle.css b/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;

diff --git a/pontoon/base/static/js/theme-switcher.js b/pontoon/base/static/js/theme-switcher.js
@@ -0,0 +1,41 @@
+$(function () {
+  $('.appearance .toggle-button button').click(function (e) {
+    e.preventDefault();
+
+    var self = $(this);
+
+    // If the clicked button is already active, do nothing
+    if (self.is('.active')) {
+      return;
+    }
+
+    var theme = self.attr('class').split(' ')[0]; // gets the theme (dark, light, system) based on the button's class
+
+    $.ajax({
+      url: '/api/v1/user/theme/' + $('#server').data('username') + '/',
+      type: 'POST',
+      data: {
+        csrfmiddlewaretoken: $('body').data('csrf'),
+        theme: theme,
+      },
+      success: function () {
+        $('.appearance .toggle-button button').removeClass('active');
+
+        self.addClass('active');
+
+        $('body')
+          .removeClass('dark-theme light-theme system-theme')
+          .addClass(`${theme}-theme`);
+
+        Pontoon.endLoader(`Theme changed to ${theme}.`);
+      },
+      error: function (request) {
+        if (request.responseText === 'error') {
+          Pontoon.endLoader('Oops, something went wrong.', 'error');
+        } else {
+          Pontoon.endLoader(request.responseText, 'error');
+        }
+      },
+    });
+  });
+});
diff --git a/pontoon/base/templates/base.html b/pontoon/base/templates/base.html
@@ -33,9 +33,9 @@
   </head>
 
   <body
-    class="{% block class %}{% endblock %}"
+    class="{% block class %}{% endblock %} {% if request.user.is_authenticated %}{{ request.user.profile.theme }}-theme{% endif %}"
     {% if csrf_token %}data-csrf="{{ csrf_token }}"{% endif %}
-  >
+>
     {% block content %}
 
       {% include "addon_promotion.html" %}

diff --git a/pontoon/base/templates/django/base.html b/pontoon/base/templates/django/base.html
@@ -18,7 +18,7 @@
     <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 +121,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>
diff --git a/pontoon/contributors/static/css/settings.css b/pontoon/contributors/static/css/settings.css
@@ -129,6 +129,26 @@
   font-style: italic;
 }
 
+#main .appearance .field .help {
+  margin: 0 0 -12px;
+}
+
+#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;

diff --git a/pontoon/contributors/templates/contributors/settings.html b/pontoon/contributors/templates/contributors/settings.html
@@ -64,6 +64,18 @@ <h3>Personal information</h3>
         </div>
       </section>
 
+   <section class="appearance" >
+        <h3>Appearance</h3>
+        <div class="field">
+            <p class="help">Choose if Pontoon’s appearance should be dark, light, or follow your system’s settings</a></p>
+        </div>
+        <span class="toggle-button">
+            <button type="button" class="dark active" title="Use a dark theme in Pontoon"><i class="icon far fa-moon"></i>Dark theme</button>
+            <button type="button" class="light" title="Use a light theme in Pontoon"><i class="icon fa fa-sun"></i>Light theme</button>
+            <button type="button" class="system" title="Use a theme in Pontoon that matches your system settings"><i class="icon fa fa-laptop"></i>Match system</button>
+        </span>
+    </section>
+
     <section>
         <h3>External accounts</h3>
         <div class="field">
@@ -128,7 +140,7 @@ <h3>Editor settings</h3>
     </section>
 
     <section>
-        <h3>Locale settings</h3>
+        <h3>Default locales</h3>
         <div id="locale-settings" class="clearfix">
             <div id="homepage">
                 <span class="label">Homepage</span>
@@ -142,7 +154,7 @@ <h3>Locale settings</h3>
     </section>
 
     <section>
-        <h3><span class="small stress">Preferred locales to get suggestions from</span></h3>
+        <h3>Preferred locales to get suggestions from</h3>
         {{ multiple_team_selector.render(available_locales, selected_locales, form_field='locales_order', sortable=True) }}
     </section>
 
@@ -160,4 +172,5 @@ <h3><span class="small stress">Preferred locales to get suggestions from</span><
 
 {% block extend_js %}
   {% javascript 'settings' %}
+  {% javascript 'theme-switcher' %}
 {% endblock %}
diff --git a/pontoon/contributors/urls.py b/pontoon/contributors/urls.py
@@ -62,6 +62,12 @@ class UsernameConverter(StringConverter):
         views.toggle_user_profile_attribute,
         name="pontoon.contributors.toggle_user_profile_attribute",
     ),
+    # API: Toggle user theme preference
+    path(
+        "api/v1/user/theme/<username:username>/",
+        views.toggle_theme,
+        name="pontoon.contributors.toggle_theme",
+    ),
     # AJAX: Save custom homepage
     path(
         "save-custom-homepage/",

diff --git a/pontoon/contributors/views.py b/pontoon/contributors/views.py
@@ -187,6 +187,36 @@ def toggle_user_profile_attribute(request, username):
     return JsonResponse({"status": True})
 
 
+@login_required(redirect_field_name="", login_url="/403")
+@require_POST
+@transaction.atomic
+def toggle_theme(request, username):
+    user = get_object_or_404(User, username=username)
+    if user != request.user:
+        return JsonResponse(
+            {
+                "status": False,
+                "message": "Forbidden: You don't have permission to edit this user",
+            },
+            status=403,
+        )
+
+    theme = request.POST.get("theme", None)
+    allowed_themes = ["light", "dark", "system"]
+
+    if theme not in allowed_themes:
+        return JsonResponse(
+            {"status": False, "message": "Bad Request: Invalid theme"},
+            status=400,
+        )
+
+    profile = user.profile
+    profile.theme = theme
+    profile.save()
+
+    return JsonResponse({"status": True})
+
+
 @login_required(redirect_field_name="", login_url="/403")
 @require_POST
 @transaction.atomic
@@ -250,7 +280,6 @@ def settings(request):
             request.POST,
             instance=profile,
         )
-
         if (
             locales_form.is_valid()
             and user_form.is_valid()

diff --git a/pontoon/settings/base.py b/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",
     },

diff --git a/specs/0114-light-theme.md b/specs/0114-light-theme.md
@@ -12,7 +12,7 @@ Over the years, many users have expressed preference for a light color theme ove
 
 # Feature explanation
 
-Users are able to switch between `Dark theme`, `Light theme` and `Match system` in Settings and the Profile menu. Each theme is represented with a title and a radio box. As soon as the theme is selected, it gets applied and the setting get saved. The default setting is the `Dark theme`.
+Users are able to switch between `Dark theme`, `Light theme` and `Match system` in Settings and the Profile menu. Each theme is represented with a title and an icon. Tooltip shows more information about each theme, e.g. "Use a theme that matches your system settings". As soon as the theme is selected, it gets applied and the setting get saved. The default setting is the `Dark theme`.
 
 The `Match system` setting lets the browser pick the theme from the OS setting using the [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) CSS media feature.
 
@@ -45,3 +45,9 @@ The following is a non-exhaustive list of color transformations between the dark
 
 ![](0114/dashboard.png)
 *Team Dashboard*
+
+![](0114/theme-selector-profile.png)
+*Theme selector in the Profile menu*
+
+![](0114/theme-selector-settings.png)
+*Theme selector in the Settings*
diff --git a/specs/0114/theme-selector-profile.png b/specs/0114/theme-selector-profile.png
diff --git a/specs/0114/theme-selector-settings.png b/specs/0114/theme-selector-settings.png
-Original file line number
+Diff line change
@@ Expand Up / @@ -221,6 +221,7 @@ class Meta: @@
                 "chat",
                 "github",
                 "bugzilla",
+                "theme",
             )
@@ Expand Down @@