css: Add dark theme (#9361)

* css: Add dark theme

- add CSS override for dark theme
- add javascript to toggle that
- allow to override this in the profile

Fixes #2969

* rephrasing docs

---------

Co-authored-by: Benjamin Alan Jamie <benjamin@weblate.org>

docs/changes.rst

@@ -16,6 +16,7 @@ Not yet released.
 * Project stats exports to JSON/CSV now include more details; it now matches content available in the API.
 * Added check for reused translation.
 * Highlight suggested change in automatic suggestions.
+* Added dark theme; browser-following and manual setting are available.
 
 `All changes in detail <https://github.com/WeblateOrg/weblate/milestone/97?closed=1>`__.
 

docs/user/profile.rst

@@ -107,6 +107,11 @@ the Hebrew language is shown as secondarily:
 Preferences
 -----------
 
+Theme
++++++
+
+Choose whether Weblate follows system settings for dark or light theme, or choose one of them manually.
+
 Default dashboard view
 ++++++++++++++++++++++
 

requirements.txt

@@ -43,4 +43,4 @@ translate-toolkit>=3.9.0,<3.10
 translation-finder>=2.15,<3.0
 user-agents>=2.0,<2.3
 weblate-language-data>=2022.7
-weblate-schemas==2023.2
+weblate-schemas==2023.3

weblate/accounts/forms.py

@@ -262,6 +262,7 @@ class UserSettingsForm(ProfileBaseForm):
     class Meta:
         model = Profile
         fields = (
+            "theme",
             "hide_completed",
             "translate_mode",
             "zen_mode",

weblate/accounts/migrations/0025_profile_theme.py

@@ -0,0 +1,30 @@
+# Copyright © Michal Čihař <michal@weblate.org>
+#
+# SPDX-License-Identifier: GPL-3.0-or-later
+
+# Generated by Django 4.2.1 on 2023-06-08 12:24
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("accounts", "0024_rename_be_latn"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="profile",
+            name="theme",
+            field=models.CharField(
+                choices=[
+                    ("auto", "Sync with system"),
+                    ("light", "Light"),
+                    ("dark", "Dark"),
+                ],
+                default="auto",
+                max_length=10,
+                verbose_name="Theme",
+            ),
+        ),
+    ]

weblate/accounts/models.py

@@ -17,7 +17,7 @@
 from django.dispatch import receiver
 from django.utils import timezone
 from django.utils.functional import cached_property
-from django.utils.translation import get_language, gettext, gettext_lazy
+from django.utils.translation import get_language, gettext, gettext_lazy, pgettext_lazy
 from rest_framework.authtoken.models import Token
 from social_django.models import UserSocialAuth
 
@@ -395,7 +395,16 @@ class Profile(models.Model):
     translated = models.IntegerField(default=0, db_index=True)
     uploaded = models.IntegerField(default=0, db_index=True)
     commented = models.IntegerField(default=0, db_index=True)
-
+    theme = models.CharField(
+        max_length=10,
+        verbose_name=gettext_lazy("Theme"),
+        default="auto",
+        choices=(
+            ("auto", pgettext_lazy("Theme selection", "Sync with system")),
+            ("light", pgettext_lazy("Theme selection", "Light")),
+            ("dark", pgettext_lazy("Theme selection", "Dark")),
+        ),
+    )
     hide_completed = models.BooleanField(
         verbose_name=gettext_lazy("Hide completed translations on the dashboard"),
         default=False,
@@ -663,6 +672,7 @@ def dump_object(obj, *attrs):
                 "translated",
                 "uploaded",
                 "hide_completed",
+                "theme",
                 "secondary_in_zen",
                 "hide_source_secondary",
                 "editor_link",

weblate/accounts/tests/test_views.py

@@ -373,6 +373,7 @@ def test_profile(self):
                 "translate_mode": Profile.TRANSLATE_FULL,
                 "zen_mode": Profile.ZEN_VERTICAL,
                 "nearby_strings": 10,
+                "theme": "auto",
             },
         )
         self.assertRedirects(response, reverse("profile"))
@@ -392,6 +393,7 @@ def test_profile_dashboard(self):
                 "translate_mode": Profile.TRANSLATE_FULL,
                 "zen_mode": Profile.ZEN_VERTICAL,
                 "nearby_strings": 10,
+                "theme": "auto",
             },
         )
         self.assertContains(response, "Select a valid choice.")

weblate/static/style-bootstrap.css

@@ -4,6 +4,10 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
+:root {
+  color-scheme: only light;
+}
+
 .avatar {
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;