Theme Toggling Feature

pontoon/base/forms.py

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

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,
+            ),
+        ),
+    ]

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)

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,79 @@
+$(function () {
+  function getSystemTheme() {
+    if (
+      window.matchMedia &&
+      window.matchMedia('(prefers-color-scheme: light)').matches
+    ) {
+      return 'dark';
+    } else {
+      return 'light';
+    }
+  }
+
+  function applyTheme(newTheme) {
+    if (newTheme === 'system') {
+      newTheme = getSystemTheme();
+    }
+    $('body')
+      .removeClass('dark-theme light-theme system-theme')
+      .addClass(`${newTheme}-theme`)
+      .data('theme', newTheme);
+  }
+
+  window
+    .matchMedia('(prefers-color-scheme: dark)')
+    .addEventListener('change', function (e) {
+      // Check the 'data-theme' attribute on the body element
+      let userThemeSetting = $('body').data('theme');
+
+      if (userThemeSetting === 'system') {
+        // Apply the system theme based on current system settings
+        if (e.matches) {
+          applyTheme('dark');
+        } else {
+          applyTheme('light');
+        }
+      }
+    });
+
+  if ($('body').hasClass('system-theme')) {
+    let systemTheme = getSystemTheme();
+    $('body').removeClass('system-theme').addClass(`${systemTheme}-theme`);
+  }
+
+  $('.appearance .toggle-button button').click(function (e) {
+    e.preventDefault();
+
+    var self = $(this);
+
+    if (self.is('.active')) {
+      return;
+    }
+
+    var theme = self.val();
+
+    $.ajax({
+      url: '/api/v1/user/' + $('#server').data('username') + '/theme/',
+      type: 'POST',
+      data: {
+        csrfmiddlewaretoken: $('body').data('csrf'),
+        theme: theme,
+      },
+      success: function () {
+        $('.appearance .toggle-button button').removeClass('active');
+        self.addClass('active');
+        applyTheme(theme);
+
+        // Notify the user about the theme change after AJAX success
+        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');
+        }
+      },
+    });
+  });
+});

pontoon/base/templates/base.html

@@ -33,9 +33,10 @@
   </head>
 
   <body
-    class="{% block class %}{% endblock %}"
+    class="{% block class %}{% endblock %} {% if request.user.is_authenticated %}{{ user.profile.theme }}-theme{% endif %}"
     {% if csrf_token %}data-csrf="{{ csrf_token }}"{% endif %}
   >
+
     {% block content %}
 
       {% include "addon_promotion.html" %}

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;

pontoon/contributors/static/js/settings.js

@@ -1,6 +1,6 @@
 $(function () {
   // Toggle visibility
-  $('.toggle-button button').click(function (e) {
+  $('.data-visibility .toggle-button button').click(function (e) {
     e.preventDefault();
 
     var self = $(this);

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 appearance should be dark, light, or follow your system’s settings</a></p>
+        </div>
+        <span class="toggle-button">
+        <button type="button" value ="dark" class="dark {% if user.profile.theme == "dark" %}active{% endif %}" title="Use a dark theme"><i class="icon far fa-moon"></i>Dark theme</button>
+        <button type="button" value="light"class="light {% if user.profile.theme == "light" %}active{% endif %}" title="Use a light theme"><i class="icon fa fa-sun"></i>Light theme</button>
+        <button type="button" value ="system" class="system {% if user.profile.theme == "system" %}active{% endif %}" title="Use a theme 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">
@@ -83,7 +95,7 @@ <h3>External accounts</h3>
         </div>
     </section>
 
-    <section>
+    <section class="data-visibility">
         <h3>Visibility of data on the Profile page</h3>
         <div class="field">
             <span class="toggle-label">{{ user_profile_visibility_form.visibility_email.label }}</span>
@@ -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>
 

pontoon/contributors/urls.py

@@ -56,6 +56,12 @@ class UsernameConverter(StringConverter):
         views.mark_all_notifications_as_read,
         name="pontoon.contributors.notifications.mark.all.as.read",
     ),
+    # API: Toggle user theme preference
+    path(
+        "api/v1/user/<username:username>/theme/",
+        views.toggle_theme,
+        name="pontoon.contributors.toggle_theme",
+    ),
     # API: Toggle user profile attribute
     path(
         "api/v1/user/<username:username>/",

pontoon/contributors/views.py

@@ -4,6 +4,7 @@
 from django.contrib import messages
 from django.contrib.auth.decorators import login_required
 from django.contrib.auth.models import User
+from django.core.exceptions import ValidationError
 from django.db import transaction
 from django.db.models import Q
 from django.http import (
@@ -187,6 +188,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)
+
+    try:
+        profile = user.profile
+        profile.theme = theme
+        profile.full_clean()
+        profile.save()
+    except ValidationError:
+        return JsonResponse(
+            {"status": False, "message": "Bad Request: Invalid theme"},
+            status=400,
+        )
+
+    return JsonResponse({"status": True})
+
+
 @login_required(redirect_field_name="", login_url="/403")
 @require_POST
 @transaction.atomic

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",
@@ -372,7 +373,11 @@ def _default_from_email():
         "output_filename": "css/base.min.css",
     },
     "translate": {
-        "source_filenames": ("translate.css", "css/dark-theme.css"),
+        "source_filenames": (
+            "translate.css",
+            "css/dark-theme.css",
+            "css/light-theme.css",
+        ),
         "output_filename": "css/translate.min.css",
     },
     "admin": {
@@ -515,11 +520,12 @@ 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",
     },
     "translate": {
-        "source_filenames": ("translate.js",),
+        "source_filenames": ("translate.js"),
         "output_filename": "js/translate.min.js",
     },
     "admin": {

pontoon/translate/views.py

@@ -44,6 +44,10 @@ def translate(request, locale, project, resource):
     # Validate Locale
     locale = get_object_or_404(Locale, code=locale)
 
+    # Get user theme
+    if request.user.is_authenticated:
+        user_theme = request.user.profile.theme + "-theme"
+
     # Validate Project
     if project.lower() != "all-projects":
         project = get_project_or_redirect(

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*

translate/public/translate.html

@@ -24,7 +24,7 @@
 
     {% include "tracker.html" %}
   </head>
-  <body>
+  <body class="{% block class %}{% endblock %} {% if request.user.is_authenticated %}{{ user.profile.theme }}-theme{% endif %}">
     <noscript>
       You need to enable JavaScript to run this app.
     </noscript>