From 3b59b5cb1afa825c5a8a8605b468f7e7c640859e Mon Sep 17 00:00:00 2001
From: Livio Spring <livio.a@gmail.com>
Date: Thu, 25 Jul 2024 09:38:36 +0200
Subject: [PATCH] fix(login): correctly render logo based on theme mode (#8355)

# Which Problems Are Solved

The initial load of the login UI with dark mode preference
(prefers-color-scheme: dark) first rendered the logo configured for
light mode. Also switching from dark to light or vice versa would result
in the same behavior.
This was due to a mixed logic of server (based on cookie) and client
(prefers-color-scheme and cookie) deciding which mode to render.

# How the Problems Are Solved

- Since the main logic of which mode to use (`prefers-color-scheme`) can
only be achieve client side, both logos will be served in the HTML and
either will be rendered based on CSS.

# Additional Changes

None

# Additional Context

- closes #2085
---
 .../themes/scss/styles/header/header.scss      |  7 +++++++
 .../api/ui/login/static/templates/header.html  | 18 +++++++++---------
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/internal/api/ui/login/static/resources/themes/scss/styles/header/header.scss b/internal/api/ui/login/static/resources/themes/scss/styles/header/header.scss
index 58b345c43..ad7901edd 100644
--- a/internal/api/ui/login/static/resources/themes/scss/styles/header/header.scss
+++ b/internal/api/ui/login/static/resources/themes/scss/styles/header/header.scss
@@ -18,5 +18,12 @@ $lgn-header-margin: auto;
     max-width: 250px;
     max-height: 150px;
     object-fit: contain;
+
+    .lgn-dark-theme &.lgn-logo-light {
+      display: none;
+    }
+    .lgn-light-theme &.lgn-logo-dark {
+      display: none;
+    }
   }
 }
diff --git a/internal/api/ui/login/static/templates/header.html b/internal/api/ui/login/static/templates/header.html
index 34d508fb5..bad87a39e 100644
--- a/internal/api/ui/login/static/templates/header.html
+++ b/internal/api/ui/login/static/templates/header.html
@@ -1,17 +1,17 @@
 {{define "header"}}
 <header class="lgn-header">
     {{ if hasCustomPolicy .LabelPolicy }}
-        {{ $logo := customLogoResource .PrivateLabelingOrgID .LabelPolicy .DarkMode }}
-        {{if $logo}}
-            <img class="lgn-logo" src="{{$logo}}" alt="Logo">
+        {{ $logoDark := customLogoResource .PrivateLabelingOrgID .LabelPolicy true }}
+        {{ $logoLight := customLogoResource .PrivateLabelingOrgID .LabelPolicy false }}
+        {{if $logoDark}}
+            <img class="lgn-logo lgn-logo-dark" src="{{$logoDark}}" alt="Logo">
+        {{end}}
+        {{if $logoLight}}
+        <img class="lgn-logo lgn-logo-light" src="{{$logoLight}}" alt="Logo">
         {{end}}
     {{ else }}
-
-        {{if .DarkMode }}
-            <img class="lgn-logo" src="{{ resourceThemeUrl "logo-light.svg" .Theme }}" alt="Logo">
-        {{else}}
-            <img class="lgn-logo" src="{{ resourceThemeUrl "logo-dark.svg" .Theme }}" alt="Logo">
-        {{end}}
+        <img class="lgn-logo lgn-logo-dark" src="{{ resourceThemeUrl "logo-light.svg" .Theme }}" alt="Logo">
+        <img class="lgn-logo lgn-logo-light" src="{{ resourceThemeUrl "logo-dark.svg" .Theme }}" alt="Logo">
     {{end}}
 </header>
 {{end}}