Use navbar color scheme setting to draw background of logo in wagtail admin (#439)

coderedcms/static/coderedcms/css/codered-admin.css

@@ -203,17 +203,33 @@ input[type='checkbox']::before, input[type='radio']::before {
     content: "\f12e";
 }
 
+/* Show the site's custom logo in the wagtail admin */
+
 .logo {
     margin: 0 auto;
     padding: 1em;
+    margin-bottom: 1em;
 }
-.logo img.logo-custom {
+.logo img.codered-logo-custom {
     width:auto;
     height:auto;
     max-height:80px;
     max-width:100%;
 }
-
+.codered-logo-container {
+    box-sizing: border-box;
+    padding-top: 1em;
+    padding-bottom: 1em;
+}
+.codered-logo-container.navbar-light {
+    background-color: #f1f1f1;
+    border-radius: 6px;
+    padding-left: 1em;
+    padding-right: 1em;
+}
+.codered-logo-container.navbar-dark {
+    background-color: transparent;
+}
 
 /* Fix side menu to be able to fit more links without breaking */
 

coderedcms/templates/wagtailadmin/base.html

@@ -4,8 +4,10 @@
 
 {% block branding_logo %}
     {% if settings.coderedcms.LayoutSettings.logo %}
-        {% image settings.coderedcms.LayoutSettings.logo max-300x300 as logo_image %}
-        <img src="{{ logo_image.url }}" class="logo-custom" alt="Dashboard"/>
+        <div class="codered-logo-container {{settings.coderedcms.LayoutSettings.navbar_color_scheme}}">
+            {% image settings.coderedcms.LayoutSettings.logo max-300x300 as logo_image %}
+            <img src="{{ logo_image.url }}" class="codered-logo-custom" alt="Dashboard"/>
+        </div>
     {% else %}
         {{block.super}}
     {% endif %}

docs/releases/v0.22.0.rst

@@ -11,6 +11,9 @@ New features
   sort order, in addition to ordering by model attributes. Read details in
   :doc:`/features/page_types/web_pages`.
 
+* Background behind site's logo shown in the Wagtail Admin now follows "Navbar
+  color scheme" setting to improve appearance of dark logos.
+
 
 Upgrade considerations
 ----------------------