From bce26f646a2bc22f5f8756f4ab6e04293466985b Mon Sep 17 00:00:00 2001
From: Christian Byrne <cbyrne@comfy.org>
Date: Mon, 27 Oct 2025 13:08:15 -0700
Subject: [PATCH] [don't backport to main] fix: topbar badges bg color on cloud
 (uses old menus style) (#6332)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

The topbar badges and cloud badges were changed to work with the new
menu system because it was developed on main - but on the cloud RC
branch, the old menu system still presides which uses a different topbar
background color. This PR fixes the badges to align with that.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6332-don-t-backport-to-main-fix-topbar-badges-bg-color-on-cloud-uses-old-menus-style-2996d73d365081328f61f1e0fccbbbe5)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
---
 src/components/topbar/CloudBadge.vue                         | 2 +-
 src/components/topbar/TopbarBadge.vue                        | 2 +-
 .../cloud/subscription/components/SubscriptionPanel.vue      | 5 ++++-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/topbar/CloudBadge.vue b/src/components/topbar/CloudBadge.vue
index 93772f7f4..897ab5144 100644
--- a/src/components/topbar/CloudBadge.vue
+++ b/src/components/topbar/CloudBadge.vue
@@ -27,7 +27,7 @@ withDefaults(
     displayMode: 'full',
     reverseOrder: false,
     noPadding: false,
-    backgroundColor: 'var(--comfy-menu-bg)'
+    backgroundColor: 'var(--comfy-menu-secondary-bg)'
   }
 )
 
diff --git a/src/components/topbar/TopbarBadge.vue b/src/components/topbar/TopbarBadge.vue
index 9a766f85a..6a2732a88 100644
--- a/src/components/topbar/TopbarBadge.vue
+++ b/src/components/topbar/TopbarBadge.vue
@@ -141,7 +141,7 @@ const props = withDefaults(
     displayMode: 'full',
     reverseOrder: false,
     noPadding: false,
-    backgroundColor: 'var(--comfy-menu-bg)'
+    backgroundColor: 'var(--comfy-menu-secondary-bg)'
   }
 )
 
diff --git a/src/platform/cloud/subscription/components/SubscriptionPanel.vue b/src/platform/cloud/subscription/components/SubscriptionPanel.vue
index 2903d5e8b..fa751d47b 100644
--- a/src/platform/cloud/subscription/components/SubscriptionPanel.vue
+++ b/src/platform/cloud/subscription/components/SubscriptionPanel.vue
@@ -5,7 +5,10 @@
         <h2 class="text-2xl">
           {{ $t('subscription.title') }}
         </h2>
-        <CloudBadge reverse-order />
+        <CloudBadge
+          reverse-order
+          background-color="var(--p-dialog-background)"
+        />
       </div>
 
       <div class="grow overflow-auto">