From 8dccb28d54558892591e00dc94b02c252f74e30b Mon Sep 17 00:00:00 2001
From: Dimitri Anoudis <dimitrianoudi@gmail.com>
Date: Thu, 7 Nov 2024 11:33:06 +0000
Subject: [PATCH 1/8] (dark-light-mode): It adds Dark and Light mode for Brand
 Logo

---
 javascripts/discourse/components/brand-header-contents.gjs | 6 +++++-
 settings.yaml                                              | 4 ++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/javascripts/discourse/components/brand-header-contents.gjs b/javascripts/discourse/components/brand-header-contents.gjs
index 14cb1d5..283011f 100644
--- a/javascripts/discourse/components/brand-header-contents.gjs
+++ b/javascripts/discourse/components/brand-header-contents.gjs
@@ -14,10 +14,14 @@ 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 logoLightUrl = settings.logo_light_url || "";
     const title = settings.brand_name;
+    const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const selectedLogoUrl = isDarkMode ? logoDarkUrl : logoLightUrl;
 
     return {
-      url: showMobileLogo ? mobileLogoUrl : logoUrl,
+      url: showMobileLogo ? mobileLogoUrl : selectedLogoUrl || logoUrl,  // Fallback to logoUrl if no light/dark URL set
       title,
     };
   }
diff --git a/settings.yaml b/settings.yaml
index 51a1824..05cde6e 100644
--- a/settings.yaml
+++ b/settings.yaml
@@ -4,6 +4,10 @@ website_url:
   default: ""
 logo_url:
   default: ""
+logo_dark_url:
+  default: ""
+logo_light_url:
+  default: ""
 mobile_logo_url:
   default: ""
 

From e3204742f431463a0ebe02214f306f9531e4158a Mon Sep 17 00:00:00 2001
From: Dimitri Anoudis <dimitrianoudi@gmail.com>
Date: Wed, 13 Nov 2024 10:09:28 +0000
Subject: [PATCH 2/8] (dark-light-mode): It makes use of the category logo

---
 .../components/brand-header-contents.gjs      | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/javascripts/discourse/components/brand-header-contents.gjs b/javascripts/discourse/components/brand-header-contents.gjs
index 283011f..c6356a9 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 {
@@ -15,13 +16,12 @@ export default class BrandHeaderContents extends Component {
     const showMobileLogo = mobileView && mobileLogoUrl.length > 0;
     const logoUrl = settings.logo_url || "";
     const logoDarkUrl = settings.logo_dark_url || "";
-    const logoLightUrl = settings.logo_light_url || "";
     const title = settings.brand_name;
-    const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-    const selectedLogoUrl = isDarkMode ? logoDarkUrl : logoLightUrl;
 
     return {
-      url: showMobileLogo ? mobileLogoUrl : selectedLogoUrl || logoUrl,  // Fallback to logoUrl if no light/dark URL set
+      mobileUrl: showMobileLogo ? mobileLogoUrl : null,
+      lightUrl: logoUrl,
+      darkUrl: logoDarkUrl || logoUrl,
       title,
     };
   }
@@ -37,17 +37,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.lightUrl}}
+            @darkImg={{this.brandLogo.darkUrl}}
+            title={{this.brandLogo.title}}
+          />
         {{/if}}
       </a>
     </div>

From 91c56453a0825202afa907710e3138bd122486ee Mon Sep 17 00:00:00 2001
From: Dimitri Anoudis <dimitrianoudi@gmail.com>
Date: Wed, 13 Nov 2024 10:16:14 +0000
Subject: [PATCH 3/8] (dark-light-mode): It removes the light value from
 settings

---
 settings.yaml | 2 --
 1 file changed, 2 deletions(-)

diff --git a/settings.yaml b/settings.yaml
index 05cde6e..767b495 100644
--- a/settings.yaml
+++ b/settings.yaml
@@ -6,8 +6,6 @@ logo_url:
   default: ""
 logo_dark_url:
   default: ""
-logo_light_url:
-  default: ""
 mobile_logo_url:
   default: ""
 

From 881288afacb9aa2a013633dc7afc0a5d14d9a218 Mon Sep 17 00:00:00 2001
From: Dimitri Anoudis <dimitrianoudi@gmail.com>
Date: Thu, 14 Nov 2024 15:21:50 +0000
Subject: [PATCH 4/8] img url restructuring

---
 .../discourse/components/brand-header-contents.gjs   | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/javascripts/discourse/components/brand-header-contents.gjs b/javascripts/discourse/components/brand-header-contents.gjs
index c6356a9..86591bb 100644
--- a/javascripts/discourse/components/brand-header-contents.gjs
+++ b/javascripts/discourse/components/brand-header-contents.gjs
@@ -20,8 +20,12 @@ export default class BrandHeaderContents extends Component {
 
     return {
       mobileUrl: showMobileLogo ? mobileLogoUrl : null,
-      lightUrl: logoUrl,
-      darkUrl: logoDarkUrl || logoUrl,
+      lightImg: {
+        url: logoUrl,
+      },
+      darkImg: {
+        url: logoDarkUrl,
+      },
       title,
     };
   }
@@ -48,8 +52,8 @@ export default class BrandHeaderContents extends Component {
           <LightDarkImg
             id="brand-logo"
             class="logo-big"
-            @lightImg={{this.brandLogo.lightUrl}}
-            @darkImg={{this.brandLogo.darkUrl}}
+            @lightImg={{this.brandLogo.lightImg}}
+            @darkImg={{this.brandLogo.darkImg}}
             title={{this.brandLogo.title}}
           />
         {{/if}}

From 59356072fb42a057ea78e7d9bc0d2cc4e09f6a89 Mon Sep 17 00:00:00 2001
From: Dimitri Anoudis <dimitrianoudi@gmail.com>
Date: Fri, 15 Nov 2024 17:56:28 +0000
Subject: [PATCH 5/8] (dark-light-mode): Spec fix

---
 spec/system/viewing_brand_header_spec.rb | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/spec/system/viewing_brand_header_spec.rb b/spec/system/viewing_brand_header_spec.rb
index e7f1b57..3bfd44d 100644
--- a/spec/system/viewing_brand_header_spec.rb
+++ b/spec/system/viewing_brand_header_spec.rb
@@ -24,6 +24,7 @@
     theme.update_setting(:website_url, "http://some.url.com")
     theme.update_setting(:brand_name, "some name")
     theme.update_setting(:logo_url, "http://some.url.com/logo.png")
+    theme.update_setting(:logo_dark_url, "http://some.url.com/logo-dark.png")
 
     theme.update_setting(
       :links,
@@ -48,8 +49,13 @@
     expect(page).to have_link(nil, href: "http://some.url.com")
 
     expect(page).to have_selector(
-      'img#brand-logo[title="some name"][src="http://some.url.com/logo.png"]',
+      'img#brand-logo[src="http://some.url.com/logo.png"][title="some name"]'
     )
+    
+    expect(page).to have_selector(
+      'img#brand-logo[src="http://some.url.com/logo-dark.png"][title="some name"]'
+    )
+    
 
     expect(page).to have_link("First Link", href: "http://some.url.com/first", target: "_blank")
     expect(page).to have_link("Second Link", href: "http://some.url.com/second", target: "_self")

From 9f166ee640e1776fe67a954281763cbde62f1055 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Fri, 15 Nov 2024 13:12:18 -0500
Subject: [PATCH 6/8] Update viewing_brand_header_spec.rb

the picture element won't render a broken image like previously expected from the img element in the test, so we need to add visible: :all
---
 spec/system/viewing_brand_header_spec.rb | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/spec/system/viewing_brand_header_spec.rb b/spec/system/viewing_brand_header_spec.rb
index 3bfd44d..1eb3e2c 100644
--- a/spec/system/viewing_brand_header_spec.rb
+++ b/spec/system/viewing_brand_header_spec.rb
@@ -24,7 +24,6 @@
     theme.update_setting(:website_url, "http://some.url.com")
     theme.update_setting(:brand_name, "some name")
     theme.update_setting(:logo_url, "http://some.url.com/logo.png")
-    theme.update_setting(:logo_dark_url, "http://some.url.com/logo-dark.png")
 
     theme.update_setting(
       :links,
@@ -49,13 +48,8 @@
     expect(page).to have_link(nil, href: "http://some.url.com")
 
     expect(page).to have_selector(
-      'img#brand-logo[src="http://some.url.com/logo.png"][title="some name"]'
+      'img#brand-logo[title="some name"][src="http://some.url.com/logo.png"]', visible: :all
     )
-    
-    expect(page).to have_selector(
-      'img#brand-logo[src="http://some.url.com/logo-dark.png"][title="some name"]'
-    )
-    
 
     expect(page).to have_link("First Link", href: "http://some.url.com/first", target: "_blank")
     expect(page).to have_link("Second Link", href: "http://some.url.com/second", target: "_self")

From 79cc0e75ed0918191e6833e5e81f24aa4b61aad2 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Fri, 15 Nov 2024 13:15:05 -0500
Subject: [PATCH 7/8] stree formatting

---
 spec/system/viewing_brand_header_spec.rb | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/spec/system/viewing_brand_header_spec.rb b/spec/system/viewing_brand_header_spec.rb
index 1eb3e2c..690d904 100644
--- a/spec/system/viewing_brand_header_spec.rb
+++ b/spec/system/viewing_brand_header_spec.rb
@@ -48,7 +48,8 @@
     expect(page).to have_link(nil, href: "http://some.url.com")
 
     expect(page).to have_selector(
-      'img#brand-logo[title="some name"][src="http://some.url.com/logo.png"]', visible: :all
+      '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")

From 3ceb0aefb0763e38c7caf7b4a3d47fd98d53c6af Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Fri, 15 Nov 2024 13:18:09 -0500
Subject: [PATCH 8/8] formatting

---
 spec/system/viewing_brand_header_spec.rb | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/spec/system/viewing_brand_header_spec.rb b/spec/system/viewing_brand_header_spec.rb
index 690d904..056c4f2 100644
--- a/spec/system/viewing_brand_header_spec.rb
+++ b/spec/system/viewing_brand_header_spec.rb
@@ -48,8 +48,8 @@
     expect(page).to have_link(nil, href: "http://some.url.com")
 
     expect(page).to have_selector(
-      'img#brand-logo[title="some name"][src="http://some.url.com/logo.png"]', 
-      visible: :all
+      '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")