From b6528db3edea46a1140a096aeb1cae239d5e7e70 Mon Sep 17 00:00:00 2001
From: Nico <32375741+nulmete@users.noreply.github.com>
Date: Fri, 15 May 2026 15:19:47 +0200
Subject: [PATCH] Fix: Light mode logo gets applied in dark mode when the dark
 one is default + Logo backgrounds should be the same color as the navbar
 background (#45569)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!-- Add the related story/sub-task/bug number, like Resolves #123, or
remove if NA -->
**Related issue:** Resolves #45554, Resolves #45555, Resolves #45557

## Testing

- [x] QA'd all new/changed functionality manually

#### Before

- Uploaded logo is used as a default even though it was uploaded for the
other mode.
- Logo preview cards do not match navbar's background.
<img width="1207" height="825" alt="dark-mode"
src="https://github.com/user-attachments/assets/0526aa33-9f43-4e7b-9c19-e490991b085a"
/>

#### After
- Uploaded logo is used only for the mode it was uploaded for.
- Logo preview card backgrounds are static: they always match the
navbar's background. (See
[Figma](https://www.figma.com/design/3oQUXGnjMCqX4U2B9nQ9X8/-39016-Ability-to-upload-a-custom-logo-served-from-my-Fleet-ins?node-id=5305-2589&t=YAckLtIgJCzLuHg1-0)
wireframes.)
<img width="1213" height="827" alt="Screenshot 2026-05-15 at 9 26 27 AM"
src="https://github.com/user-attachments/assets/c16d3919-d98b-4c53-9797-4b820d4c6c4c"
/>
<img width="1215" height="821" alt="Screenshot 2026-05-15 at 9 26 43 AM"
src="https://github.com/user-attachments/assets/f6ff83dc-127c-417b-a6ad-a1c6ce3e488e"
/>


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Style**
  * Improved logo display consistency across light and dark modes.
* Updated background colors for logo preview sections to enhance visual
appearance in both themes.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/fleetdm/fleet/pull/45569)

<!-- review_stack_entry_end -->

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 frontend/components/top_nav/SiteTopNav/SiteTopNav.tsx        | 3 +--
 frontend/pages/admin/OrgSettingsPage/cards/Info/_styles.scss | 4 ++--
 frontend/styles/var/colors.scss                              | 2 ++
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/frontend/components/top_nav/SiteTopNav/SiteTopNav.tsx b/frontend/components/top_nav/SiteTopNav/SiteTopNav.tsx
index 2f6e83949e..aec316f9b3 100644
--- a/frontend/components/top_nav/SiteTopNav/SiteTopNav.tsx
+++ b/frontend/components/top_nav/SiteTopNav/SiteTopNav.tsx
@@ -174,8 +174,7 @@ const SiteTopNav = ({
     const lightLogoURL =
       config.org_info.org_logo_url_light_mode ||
       config.org_info.org_logo_url_light_background;
-    const hasDarkLogo = darkLogoURL && darkLogoURL !== lightLogoURL;
-    const orgLogoURL = darkMode && hasDarkLogo ? darkLogoURL : lightLogoURL;
+    const orgLogoURL = darkMode ? darkLogoURL : lightLogoURL;
     const active = navItem.location.regex.test(currentPath);
 
     const navItemBaseClass = "site-nav-item";
diff --git a/frontend/pages/admin/OrgSettingsPage/cards/Info/_styles.scss b/frontend/pages/admin/OrgSettingsPage/cards/Info/_styles.scss
index 871921da60..cfb0141f01 100644
--- a/frontend/pages/admin/OrgSettingsPage/cards/Info/_styles.scss
+++ b/frontend/pages/admin/OrgSettingsPage/cards/Info/_styles.scss
@@ -50,10 +50,10 @@
   }
 
   &__dark-background {
-    background-color: $ui-fleet-black-75;
+    background-color: $logo-preview-dark;
   }
 
   &__light-background {
-    background-color: $ui-light-grey;
+    background-color: $logo-preview-light;
   }
 }
diff --git a/frontend/styles/var/colors.scss b/frontend/styles/var/colors.scss
index 95e6eba184..76fa9b45c5 100644
--- a/frontend/styles/var/colors.scss
+++ b/frontend/styles/var/colors.scss
@@ -309,6 +309,8 @@ $static-black: #192147;
 $dark-mode-table-header: #282c33;
 $dark-mode-table-row: #1f2229;
 $dark-mode-nav-hover: #1f2228;
+$logo-preview-light: #ffffff;
+$logo-preview-dark: #1a1c21;
 
 // Opaque colors for table shadows — compile-time SCSS math, not themed.
 // These are subtle edge effects; dark-mode polish can refine them later.