Basic BE setup for contrast themes

client/scss/components/_button.scss

@@ -318,6 +318,10 @@
       }
     }
   }
+
+  .w-contrast-high & {
+    border: 1px solid theme('colors.border-button-outline-default');
+  }
 }
 
 .w-header-button {

wagtail/admin/forms/account.py

@@ -140,4 +140,4 @@ class Meta:
 class ThemePreferencesForm(forms.ModelForm):
     class Meta:
         model = UserProfile
-        fields = ["theme", "density"]
+        fields = ["theme", "contrast", "density"]

wagtail/admin/templatetags/wagtailadmin_tags.py

@@ -674,12 +674,18 @@ def admin_theme_classname(context):
         if hasattr(user, "wagtail_userprofile")
         else "system"
     )
+    contrast_name = (
+        user.wagtail_userprofile.contrast
+        if hasattr(user, "wagtail_userprofile")
+        else "default"
+    )
     density_name = (
         user.wagtail_userprofile.density
         if hasattr(user, "wagtail_userprofile")
         else "default"
     )
-    return f"w-theme-{theme_name} w-density-{density_name}"
+    contrast_name = contrast_name.split("_")[0]
+    return f"w-theme-{theme_name} w-density-{density_name} w-contrast-{contrast_name}"
 
 
 @register.simple_tag

wagtail/users/migrations/0014_userprofile_contrast.py

@@ -0,0 +1,23 @@
+# Generated by Django 5.0.6 on 2024-09-23 15:33
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("wagtailusers", "0013_userprofile_density"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="userprofile",
+            name="contrast",
+            field=models.CharField(
+                choices=[("default", "Default"), ("high_contrast", "High contrast")],
+                default="default",
+                max_length=40,
+                verbose_name="contrast",
+            ),
+        ),
+    ]

wagtail/users/models.py

@@ -84,6 +84,17 @@ class AdminColorThemes(models.TextChoices):
         max_length=40,
     )
 
+    class AdminContrastThemes(models.TextChoices):
+        DEFAULT = "default", _("Default")
+        HIGH_CONTRAST = "high_contrast", _("High contrast")
+
+    contrast = models.CharField(
+        verbose_name=_("contrast"),
+        choices=AdminContrastThemes.choices,
+        default=AdminContrastThemes.DEFAULT,
+        max_length=40,
+    )
+
     class AdminDensityThemes(models.TextChoices):
         DEFAULT = "default", _("Default")
         SNUG = "snug", _("Snug")