Update styles for userbar and a11y checker in dark mode

albinazs · Jul 16, 2023 · f35e9d7 · f35e9d7
1 parent ecb2126
commit f35e9d7
Show file tree

Hide file tree

Showing 7 changed files with 15 additions and 7 deletions.
diff --git a/CHANGELOG.txt b/CHANGELOG.txt
@@ -28,6 +28,7 @@ Changelog
  * Add support for AVIF images (Aman Pandey)
  * Change the default WebP quality to 80 to match AVIF (Aman Pandey)
  * Adopt optimised Wagtail logo in the admin interface (Albina Starykova)
+ * Add support for presenting the userbar (Wagtail button) in dark mode (Albina Starykova)
  * Fix: Prevent choosers from failing when initial value is an unrecognised ID, e.g. when moving a page from a location where `parent_page_types` would disallow it (Dan Braghis)
  * Fix: Move comment notifications toggle to the comments side panel (Sage Abdullah)
  * Fix: Remove comment button on InlinePanel fields (Sage Abdullah)

diff --git a/client/scss/components/_userbar.scss b/client/scss/components/_userbar.scss
@@ -69,7 +69,7 @@ $positions: (
   width: $size-home-button;
   height: $size-home-button;
   margin: 0;
-  background-color: theme('colors.surface-page');
+  background-color: theme('colors.white.DEFAULT');
   border: 2px solid transparent;
   border-radius: 50%;
   padding: 0;
@@ -258,6 +258,10 @@ $positions: (
     background: theme('colors.surface-page');
   }
 
+  .w-dialog__close-icon {
+    color: theme('colors.text-context');
+  }
+
   .w-dialog__content {
     padding: 0;
     min-height: unset;
@@ -319,7 +323,7 @@ $positions: (
   .w-a11y-result__selector {
     display: flex;
     align-items: center;
-    background: theme('colors.surface-header');
+    background: theme('colors.surface-field-inactive');
     color: theme('colors.text-context');
     border-radius: theme('borderRadius.DEFAULT');
     margin-inline-end: theme('spacing.[2.5]');

diff --git a/docs/releases/5.1.md b/docs/releases/5.1.md
@@ -75,6 +75,7 @@ This feature was developed by Aman Pandey as part of the Google Summer of Code p
  * Purge revisions of non-page models in `purge_revisions` command (Sage Abdullah)
  * Change the default WebP quality to 80 to match AVIF (Aman Pandey)
  * Adopt optimised Wagtail logo in the admin interface (Albina Starykova)
+* Add support for presenting the userbar (Wagtail button) in dark mode (Albina Starykova)
 
 ### Bug fixes
 

diff --git a/wagtail/admin/templates/wagtailadmin/skeleton.html b/wagtail/admin/templates/wagtailadmin/skeleton.html
@@ -2,7 +2,7 @@
 {% load wagtailadmin_tags i18n %}
 {% get_current_language as LANGUAGE_CODE %}
 {% get_current_language_bidi as LANGUAGE_BIDI %}
-<html lang="{{ LANGUAGE_CODE }}" dir="{% if LANGUAGE_BIDI %}rtl{% else %}ltr{% endif %}" class="w-theme-{% admin_theme_name %}">
+<html lang="{{ LANGUAGE_CODE }}" dir="{% if LANGUAGE_BIDI %}rtl{% else %}ltr{% endif %}" class="{% admin_theme_classname %}">
     <head>
         <meta charset="utf-8" />
         <title>{% block titletag %}{% endblock %} - {% block branding_title %}Wagtail{% endblock %}</title>

diff --git a/wagtail/admin/templates/wagtailadmin/userbar/base.html b/wagtail/admin/templates/wagtailadmin/userbar/base.html
@@ -2,7 +2,7 @@
 <!-- Wagtail user bar embed code -->
 <template id="wagtail-userbar-template">
     <aside>
-        <div class="w-userbar w-userbar--{{ position|default:'bottom-right' }}" data-wagtail-userbar part="userbar">
+        <div class="w-userbar w-userbar--{{ position|default:'bottom-right' }} {% admin_theme_classname %}" data-wagtail-userbar part="userbar">
             <link rel="stylesheet" href="{% versioned_static 'wagtailadmin/css/core.css' %}">
             {% hook_output 'insert_global_admin_css' %}
             {% hook_output 'insert_editor_css' %}

diff --git a/wagtail/admin/templates/wagtailadmin/userbar/item_accessibility.html b/wagtail/admin/templates/wagtailadmin/userbar/item_accessibility.html
@@ -12,7 +12,8 @@
         {% trans 'Issues found' %}
         <span class="w-a11y-result__count" data-a11y-result-count></span>
     {% endfragment %}
-    {% dialog id="accessibility-results" theme="floating" classname="w-dialog--userbar" title=dialog_title subtitle=issues_found a11y_count="a11y_count" %}
+    {% fragment as dialog_classname %}w-dialog--userbar {% admin_theme_classname %}{% endfragment %}
+    {% dialog id="accessibility-results" theme="floating" classname=dialog_classname title=dialog_title subtitle=issues_found a11y_count="a11y_count" %}
         {# Contents of the dialog created in JS based on these templates. #}
         <template id="w-a11y-result-row-template">
             <div class="w-a11y-result__row" data-a11y-result-row>

diff --git a/wagtail/admin/templatetags/wagtailadmin_tags.py b/wagtail/admin/templatetags/wagtailadmin_tags.py
@@ -613,16 +613,17 @@ def avatar_url(user, size=50, gravatar_only=False):
 
 
 @register.simple_tag(takes_context=True)
-def admin_theme_name(context):
+def admin_theme_classname(context):
     """
     Retrieves the theme name for the current user.
     """
     user = context["request"].user
-    return (
+    theme_name = (
         user.wagtail_userprofile.theme
         if hasattr(user, "wagtail_userprofile")
         else "system"
     )
+    return f"w-theme-{theme_name}"
 
 
 @register.simple_tag