Ensure logo shows correctly on log in page in Windows high contrast

- Added a class to the logo image and also added forced mode to the logo image class
- Fixes #9428

CHANGELOG.txt

@@ -15,6 +15,7 @@ Changelog
  * Fix: references extraction for ChooserBlock (Alex Tomkins)
  * Fix: Incorrectly formatted link in the documentation for Wagtail community support (Bolarinwa Comfort Ajayi)
  * Fix: Text within status tags text will now resize correctly when customizing browser font size (Mary Ojo)
+ * Fix: Ensure logo shows correctly on log in page in Windows high-contrast mode (Loveth Omokaro)
 
 
 4.1 LTS (xx.xx.xxxx) - IN DEVELOPMENT

client/scss/layouts/_login.scss

@@ -126,4 +126,10 @@
     margin: theme('spacing.8') auto 0;
     width: theme('spacing.8');
   }
+
+  @media (forced-colors: $media-forced-colours) and (prefers-color-scheme: dark) {
+    .login-logo-img {
+      filter: invert(100%);
+    }
+  }
 }

docs/releases/4.2.md

@@ -27,6 +27,7 @@ depth: 1
  * Ensure visual consistency between buttons and links as buttons in Windows high-contrast mode (Albina Starykova)
  * Ensure `ChooserBlock.extract_references` uses the model class, not the model string (Alex Tomkins)
  * Incorrectly formatted link in the documentation for Wagtail community support (Bolarinwa Comfort Ajayi)
+ * Ensure logo shows correctly on log in page in Windows high-contrast mode (Loveth Omokaro)
 
 ## Upgrade considerations
 

wagtail/admin/templates/wagtailadmin/login.html

@@ -59,7 +59,7 @@
 
         {% block branding_logo %}
             <div class="login-logo">
-                <img src="{% versioned_static 'wagtailadmin/images/wagtail-logo.svg' %}" alt=""/>
+                <img class="login-logo-img" alt="" src="{% versioned_static 'wagtailadmin/images/wagtail-logo.svg' %}" />
             </div>
         {% endblock %}
     </main>