From 642693283428a17f11cd06ef52800487c84e4fab Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Fri, 7 Oct 2022 11:37:07 -0400
Subject: [PATCH] UX: Default to dark category logo on dark schemes (#18510)

Fixes an edge case for when a category has a dark logo and the default
color scheme is dark.
---
 .../discourse/app/components/category-logo.js | 20 +++++++++++++++++--
 .../templates/components/category-logo.hbs    |  2 +-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/category-logo.js b/app/assets/javascripts/discourse/app/components/category-logo.js
index 742bb3c18ef..7ab722ae7bc 100644
--- a/app/assets/javascripts/discourse/app/components/category-logo.js
+++ b/app/assets/javascripts/discourse/app/components/category-logo.js
@@ -1,3 +1,19 @@
-import templateOnly from "@ember/component/template-only";
+import Component from "@glimmer/component";
+import { inject as service } from "@ember/service";
 
-export default templateOnly();
+export default class CategoryLogo extends Component {
+  @service session;
+
+  get defaultCategoryLogo() {
+    // use dark logo by default in edge case
+    // when scheme is dark and dark logo is present
+    if (
+      this.session.defaultColorSchemeIsDark &&
+      this.args.category.uploaded_logo_dark
+    ) {
+      return this.args.category.uploaded_logo_dark;
+    }
+
+    return this.args.category.uploaded_logo;
+  }
+}
diff --git a/app/assets/javascripts/discourse/app/templates/components/category-logo.hbs b/app/assets/javascripts/discourse/app/templates/components/category-logo.hbs
index 8b67105bd79..1907f6b11ea 100644
--- a/app/assets/javascripts/discourse/app/templates/components/category-logo.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/category-logo.hbs
@@ -2,7 +2,7 @@
   {{#if (and @category.uploaded_logo.url @category.uploaded_logo_dark.url)}}
     <picture>
       <source srcset={{@category.uploaded_logo_dark.url}} width={{@category.uploaded_logo_dark.width}} height={{@category.uploaded_logo_dark.height}} media="(prefers-color-scheme: dark)">
-      <CdnImg @src={{@category.uploaded_logo.url}} @width={{@category.uploaded_logo.width}} @height={{@category.uploaded_logo.height}}/>
+      <CdnImg @src={{this.defaultCategoryLogo.url}} @width={{this.defaultCategoryLogo.width}} @height={{this.defaultCategoryLogo.height}}/>
     </picture>
   {{else if @category.uploaded_logo.url}}
     <CdnImg @src={{@category.uploaded_logo.url}} @width={{@category.uploaded_logo.width}} @height={{@category.uploaded_logo.height}}/>