FEATURE: adds Dark and Light mode for Brand Logo (#59)

Co-authored-by: Kris <[email protected]>

Author: dimitrianoudi

javascripts/discourse/components/brand-header-contents.gjs

@@ -1,5 +1,6 @@
 import Component from "@glimmer/component";
 import { service } from "@ember/service";
+import LightDarkImg from "discourse/components/light-dark-img";
 import dIcon from "discourse-common/helpers/d-icon";
 
 export default class BrandHeaderContents extends Component {
@@ -14,10 +15,17 @@ export default class BrandHeaderContents extends Component {
     const mobileLogoUrl = settings.mobile_logo_url || "";
     const showMobileLogo = mobileView && mobileLogoUrl.length > 0;
     const logoUrl = settings.logo_url || "";
+    const logoDarkUrl = settings.logo_dark_url || "";
     const title = settings.brand_name;
 
     return {
-      url: showMobileLogo ? mobileLogoUrl : logoUrl,
+      mobileUrl: showMobileLogo ? mobileLogoUrl : null,
+      lightImg: {
+        url: logoUrl,
+      },
+      darkImg: {
+        url: logoDarkUrl,
+      },
       title,
     };
   }
@@ -33,17 +41,21 @@ export default class BrandHeaderContents extends Component {
   <template>
     <div class="title">
       <a href={{settings.website_url}}>
-        {{#if this.brandLogo.url}}
+        {{#if this.brandLogo.mobileUrl}}
           <img
             id="brand-logo"
             class="logo-big"
-            src={{this.brandLogo.url}}
+            src={{this.brandLogo.mobileUrl}}
             title={{this.brandLogo.title}}
           />
         {{else}}
-          <h2 id="#brand-text-logo" class="text-logo">
-            {{settings.brand_name}}
-          </h2>
+          <LightDarkImg
+            id="brand-logo"
+            class="logo-big"
+            @lightImg={{this.brandLogo.lightImg}}
+            @darkImg={{this.brandLogo.darkImg}}
+            title={{this.brandLogo.title}}
+          />
         {{/if}}
       </a>
     </div>

settings.yaml

@@ -4,6 +4,8 @@ website_url:
   default: ""
 logo_url:
   default: ""
+logo_dark_url:
+  default: ""
 mobile_logo_url:
   default: ""
 

spec/system/viewing_brand_header_spec.rb

@@ -49,6 +49,7 @@
 
     expect(page).to have_selector(
       'img#brand-logo[title="some name"][src="http://some.url.com/logo.png"]',
+      visible: :all,
     )
 
     expect(page).to have_link("First Link", href: "http://some.url.com/first", target: "_blank")