feat: white logo for dark theme

Author: arbirali

tutorindigo/patches/mfe-env-config-runtime-definitions

@@ -5,21 +5,20 @@ const ThemedLogo = () => {
     <>
       <style>
         {`
-          .themed-logo {
-            width: 36px;
-            height: 24px;
-            background: no-repeat center/contain url("${BASE_URL}/static/indigo/images/logo.png");
+          #root header .logo.logo-white {
+            display: none;
+          }
+          body.indigo-dark-theme #root header .logo {
+            display: none;
+          }
+          body.indigo-dark-theme #root header .logo-white {
+            display: inline-block;
           }
-
-          {% if INDIGO_ENABLE_DARK_THEME_LOGO %}
-            body.indigo-dark-theme .themed-logo {
-              background-image: url("${BASE_URL}/static/indigo/images/logo-white.png");
-            }
-          {% endif %}
         `}
       </style>
-      <a href={`${BASE_URL}/dashboard`} className="logo" title="Logo">
-        <div class="themed-logo" role="img" aria-label="Acme logo"></div>
+      <a href={`${BASE_URL}/dashboard`} title="Open edX">
+        <img className="logo" src={`${BASE_URL}/static/indigo/images/logo.png`} alt="Open edX" />
+        <img className="logo logo-white" src={`${BASE_URL}/static/indigo/images/logo-white.png`} alt="Open edX" />
       </a>
     </>
   );
@@ -263,17 +262,36 @@ const MobileViewHeader = () => {
   };
   return (
     <div className="container-xl py-2 d-flex align-items-center justify-content-between">
+      <style>
+        {`
+          .logo-image-white {
+            display: none;
+          }
+          body.indigo-dark-theme .logo-image {
+            display: none;
+          }
+          body.indigo-dark-theme .logo-image-white {
+            display: block;
+          }
+        `}
+      </style>
       <a
         className="logo"
         href={`${config.LMS_BASE_URL}/dashboard`}
         style={Object.assign({}, { display: "flex", alignItems: "center" })}
       >
         <img
-          className="d-block"
+          className="logo-image"
           src={`${config.LMS_BASE_URL}/theming/asset/images/logo.png`}
           alt={intl.formatMessage(messages["mobile.view.header.logo.altText"])}
           height={21}
         />
+        <img
+          className="logo-image-white"
+          src={`${config.LMS_BASE_URL}/theming/asset/images/logo-white.png`}
+          alt={intl.formatMessage(messages["mobile.view.header.logo.altText"])}
+          height={21}
+        />
       </a>
       <ToggleThemeButton />
     </div>

tutorindigo/plugin.py

@@ -24,7 +24,6 @@
         "WELCOME_MESSAGE": "The place for all your online learning",
         "PRIMARY_COLOR": "#15376D",  # Indigo
         "ENABLE_DARK_TOGGLE": True,
-        "ENABLE_DARK_THEME_LOGO": True,
         # Footer links are dictionaries with a "title" and "url"
         # To remove all links, run:
         # tutor config save --set INDIGO_FOOTER_NAV_LINKS=[]
@@ -195,7 +194,7 @@ def _override_openedx_docker_image(
         (
             mfe,
             "org.openedx.frontend.layout.footer.v1",
-            """ 
+            """
             {
                 op: PLUGIN_OPERATIONS.Hide,
                 widgetId: 'default_contents',
@@ -226,7 +225,7 @@ def _override_openedx_docker_image(
             (
                 mfe,
                 "desktop_secondary_menu_slot",
-                """ 
+                """
                 {
                     op: PLUGIN_OPERATIONS.Insert,
                     widget: {
@@ -254,7 +253,7 @@ def _override_openedx_docker_image(
                 (
                     mfe,
                     "mobile_header_slot",
-                    """ 
+                    """
                 {
                     op: PLUGIN_OPERATIONS.Insert,
                     widget: {
@@ -284,7 +283,7 @@ def _override_openedx_docker_image(
         (
             "learning",
             "learning_help_slot",
-            """ 
+            """
         {
             op: PLUGIN_OPERATIONS.Insert,
             widget: {
@@ -316,7 +315,7 @@ def _add_themed_logo(
                 {
                     op: PLUGIN_OPERATIONS.Insert,
                     widget: {
-                        id: 'custom_header',
+                        id: 'custom_logo',
                         type: DIRECT_PLUGIN,
                         RenderWidget: ThemedLogo,
                     }

tutorindigo/templates/indigo/lms/static/images/logo-white.png

@@ -57,6 +57,17 @@ header.global-header {
             .logo {
                 height: 24px;
                 margin: 0;
+
+                body.indigo-dark-theme & {
+                    display: none;
+                }
+            }
+            .logo-white {
+                display: none;
+
+                body.indigo-dark-theme & {
+                    display: inline-block;
+                }
             }
         }
         .course-header {
@@ -283,17 +294,7 @@ header.global-header {
     }
 }
 
-.logo {
-    width: 36px;
-    background: no-repeat center/contain url("/static/indigo/images/logo.png");
-}
-
 body.indigo-dark-theme {
-    {% if INDIGO_ENABLE_DARK_THEME_LOGO %}
-        .logo {
-            background-image: url("/static/indigo/images/logo-white.png");
-        }
-    {% endif %}
     background: $body-bg-d !important;
     color: $text-color-d !important;
     .window-wrap {

tutorindigo/templates/indigo/lms/static/sass/extra/_header.scss

@@ -29,7 +29,8 @@
   % else:
     <a href="${branding_api.get_home_url()}" title="${_("{platform_name} Learner Home Page").format(platform_name=static.get_platform_name())}">
       <%block name="navigation_logo">
-        <div class="logo" role="img" aria-label="Acme logo"></div>
+         <img  class="logo" src="${branding_api.get_logo_url(is_secure)}" alt="${_("{platform_name} Home Page").format(platform_name=static.get_platform_name())}"/>
+         <img  class="logo logo-white" src="${static.url('images/logo-white.png')}" alt="${_("{platform_name} Home Page").format(platform_name=static.get_platform_name())}"/>
       </%block>
         % if settings.LOGO_IMAGE_EXTRA_TEXT == 'edge':
             <span class="font-italic"> | EDGE</span>