From 7e463ba574ec1c4b2fed87c9538af0b8768bc798 Mon Sep 17 00:00:00 2001
From: Dimitri <dimitrianoudi@gmail.com>
Date: Fri, 15 Nov 2024 18:23:40 +0000
Subject: [PATCH] FEATURE: adds Dark and Light mode for Brand Logo (#59)

Co-authored-by: Kris <kris.aubuchon@discourse.org>
---
 .../components/brand-header-contents.gjs      | 24 ++++++++++++++-----
 settings.yaml                                 |  2 ++
 spec/system/viewing_brand_header_spec.rb      |  1 +
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/javascripts/discourse/components/brand-header-contents.gjs b/javascripts/discourse/components/brand-header-contents.gjs
index 14cb1d5..86591bb 100644
--- a/javascripts/discourse/components/brand-header-contents.gjs
+++ b/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>
diff --git a/settings.yaml b/settings.yaml
index 51a1824..767b495 100644
--- a/settings.yaml
+++ b/settings.yaml
@@ -4,6 +4,8 @@ website_url:
   default: ""
 logo_url:
   default: ""
+logo_dark_url:
+  default: ""
 mobile_logo_url:
   default: ""
 
diff --git a/spec/system/viewing_brand_header_spec.rb b/spec/system/viewing_brand_header_spec.rb
index e7f1b57..056c4f2 100644
--- a/spec/system/viewing_brand_header_spec.rb
+++ b/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")