fix: add dark theme logos support

changelog.d/20260204_182918_136305115+HammadYousaf01_dark_theme_logo_support.md

@@ -0,0 +1 @@
+- [Improvement] Add dark theme logo support. (by @HammadYousaf01, @arbirali)

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

@@ -202,19 +202,64 @@ const MobileViewHeader = () => {
   };
   return (
     <div className="container-xl py-2 d-flex align-items-center justify-content-between">
+      <style>
+        {`
+          .logo-image-white {
+            display: none;
+          }
+          [data-paragon-theme-variant="dark"] .logo-image {
+            display: none;
+          }
+          [data-paragon-theme-variant="dark"] .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>
   );
 };
+
+const ThemedLogo = () => {
+  const BASE_URL = getConfig().LMS_BASE_URL;
+
+  return (
+    <>
+      <style>
+        {`
+          #root header .logo-image.logo-white {
+            display: none;
+          }
+          [data-paragon-theme-variant="dark"] #root header .logo-image {
+            display: none;
+          }
+          [data-paragon-theme-variant="dark"] #root header .logo-white {
+            display: block;
+          }
+        `}
+      </style>
+      <a href={`${BASE_URL}/dashboard`} title="Open edX" className="logo">
+        <img className="logo-image" src={`${BASE_URL}/static/indigo/images/logo.png`} alt="Open edX" />
+        <img className="logo-image logo-white" src={`${BASE_URL}/static/indigo/images/logo-white.png`} alt="Open edX" />
+      </a>
+    </>
+  );
+};

tutorindigo/plugin.py

@@ -8,7 +8,7 @@
 import importlib_resources
 from tutor import hooks
 from tutor.__about__ import __version_suffix__
-from tutormfe.hooks import PLUGIN_SLOTS
+from tutormfe.hooks import MFE_APPS, MFE_ATTRS_TYPE, PLUGIN_SLOTS
 
 from .__about__ import __version__
 
@@ -195,7 +195,7 @@ def _override_openedx_docker_image(
         (
             mfe,
             "org.openedx.frontend.layout.footer.v1",
-            """ 
+            """
             {
                 op: PLUGIN_OPERATIONS.Hide,
                 widgetId: 'default_contents',
@@ -226,7 +226,7 @@ def _override_openedx_docker_image(
             (
                 mfe,
                 "desktop_secondary_menu_slot",
-                """ 
+                """
                 {
                     op: PLUGIN_OPERATIONS.Insert,
                     widget: {
@@ -254,7 +254,7 @@ def _override_openedx_docker_image(
                 (
                     mfe,
                     "mobile_header_slot",
-                    """ 
+                    """
                 {
                     op: PLUGIN_OPERATIONS.Insert,
                     widget: {
@@ -284,7 +284,7 @@ def _override_openedx_docker_image(
         (
             "learning",
             "learning_help_slot",
-            """ 
+            """
         {
             op: PLUGIN_OPERATIONS.Insert,
             widget: {
@@ -320,3 +320,32 @@ def _override_openedx_docker_image(
 """
 
 hooks.Filters.ENV_PATCHES.add_item(("mfe-lms-common-settings", fstring))
+
+
+@MFE_APPS.add()  # type: ignore
+def _add_themed_logo(
+    mfes: dict[str, MFE_ATTRS_TYPE],
+) -> dict[str, MFE_ATTRS_TYPE]:
+    for mfe in mfes:
+        PLUGIN_SLOTS.add_item(
+            (
+                str(mfe),
+                "logo_slot",
+                """
+                {
+                    op: PLUGIN_OPERATIONS.Hide,
+                    widgetId: 'default_contents',
+                },
+                {
+                    op: PLUGIN_OPERATIONS.Insert,
+                    widget: {
+                        id: 'custom_logo',
+                        type: DIRECT_PLUGIN,
+                        RenderWidget: ThemedLogo,
+                    }
+                }
+            """,
+            )
+        )
+
+    return mfes

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

@@ -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,8 +294,6 @@ header.global-header {
     }
 }
 
-
-
 body.indigo-dark-theme {
     background: $body-bg-d !important;
     color: $text-color-d !important;

tutorindigo/templates/indigo/lms/templates/header/navbar-logo-header.html

@@ -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">
-        <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" 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>