From 47e3330baa848186c2d9773b1316fb4b18805f1b Mon Sep 17 00:00:00 2001
From: Chenlei Hu <hcl@comfy.org>
Date: Wed, 7 May 2025 13:48:29 -0400
Subject: [PATCH] [Branding] Match menu logo with branding spec

---
 public/assets/images/comfy-logo-mono.svg |  9 -----
 src/assets/css/style.css                 |  3 ++
 src/components/topbar/ComfyLogo.vue      | 49 ++++++++++++++++++++++++
 src/components/topbar/TopMenubar.vue     | 17 +-------
 4 files changed, 54 insertions(+), 24 deletions(-)
 delete mode 100644 public/assets/images/comfy-logo-mono.svg
 create mode 100644 src/components/topbar/ComfyLogo.vue

diff --git a/public/assets/images/comfy-logo-mono.svg b/public/assets/images/comfy-logo-mono.svg
deleted file mode 100644
index 1dc4021d20..0000000000
--- a/public/assets/images/comfy-logo-mono.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<svg width="520" height="520" viewBox="0 0 520 520" fill="none" xmlns="http://www.w3.org/2000/svg">
-<mask id="mask0_227_285" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="520" height="520">
-<path d="M0 184.335C0 119.812 0 87.5502 12.5571 62.9055C23.6026 41.2274 41.2274 23.6026 62.9055 12.5571C87.5502 0 119.812 0 184.335 0H335.665C400.188 0 432.45 0 457.094 12.5571C478.773 23.6026 496.397 41.2274 507.443 62.9055C520 87.5502 520 119.812 520 184.335V335.665C520 400.188 520 432.45 507.443 457.094C496.397 478.773 478.773 496.397 457.094 507.443C432.45 520 400.188 520 335.665 520H184.335C119.812 520 87.5502 520 62.9055 507.443C41.2274 496.397 23.6026 478.773 12.5571 457.094C0 432.45 0 400.188 0 335.665V184.335Z" fill="#FFFFFF"/>
-</mask>
-<g mask="url(#mask0_227_285)">
-<rect y="0.751831" width="520" height="520" fill="#000000"/>
-<path d="M176.484 428.831C168.649 428.831 162.327 425.919 158.204 420.412C153.966 414.755 152.861 406.857 155.171 398.749L164.447 366.178C165.187 363.585 164.672 360.794 163.059 358.636C161.446 356.483 158.921 355.216 156.241 355.216H129.571C121.731 355.216 115.409 352.308 111.289 346.802C107.051 341.14 105.946 333.242 108.258 325.134L140.124 213.748L143.642 201.51C148.371 184.904 165.62 171.407 182.097 171.407H214.009C217.817 171.407 221.167 168.868 222.215 165.183L232.769 128.135C237.494 111.545 254.742 98.048 271.219 98.048L339.468 97.9264L389.431 97.9221C397.268 97.9221 403.59 100.831 407.711 106.337C411.949 111.994 413.054 119.892 410.744 128L396.457 178.164C391.734 194.75 374.485 208.242 358.009 208.242L289.607 208.372H257.706C253.902 208.372 250.557 210.907 249.502 214.588L222.903 307.495C222.159 310.093 222.673 312.892 224.291 315.049C225.904 317.202 228.428 318.469 231.107 318.469C231.113 318.469 276.307 318.381 276.307 318.381H326.122C333.959 318.381 340.281 321.29 344.402 326.796C348.639 332.457 349.744 340.355 347.433 348.463L333.146 398.619C328.423 415.209 311.174 428.701 294.698 428.701L226.299 428.831H176.484Z" fill="#FFFFFF"/>
-</g>
-</svg>
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 1cd2b361b2..7f5718fb0e 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -27,6 +27,9 @@
   --content-fg: #000;
   --content-hover-bg: #adadad;
   --content-hover-fg: #000;
+  /* Colors for Comfy branding. */
+  --comfy-yellow: #f0ff41;
+  --comfy-blue: #172dd7;
 }
 
 @media (prefers-color-scheme: dark) {
diff --git a/src/components/topbar/ComfyLogo.vue b/src/components/topbar/ComfyLogo.vue
new file mode 100644
index 0000000000..8edf4f9efc
--- /dev/null
+++ b/src/components/topbar/ComfyLogo.vue
@@ -0,0 +1,49 @@
+<template>
+  <svg
+    width="520"
+    height="520"
+    viewBox="0 0 520 520"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <mask
+      id="mask0_227_285"
+      style="mask-type: alpha"
+      maskUnits="userSpaceOnUse"
+      x="0"
+      y="0"
+      width="520"
+      height="520"
+    >
+      <path
+        d="M0 184.335C0 119.812 0 87.5502 12.5571 62.9055C23.6026 41.2274 41.2274 23.6026 62.9055 12.5571C87.5502 0 119.812 0 184.335 0H335.665C400.188 0 432.45 0 457.094 12.5571C478.773 23.6026 496.397 41.2274 507.443 62.9055C520 87.5502 520 119.812 520 184.335V335.665C520 400.188 520 432.45 507.443 457.094C496.397 478.773 478.773 496.397 457.094 507.443C432.45 520 400.188 520 335.665 520H184.335C119.812 520 87.5502 520 62.9055 507.443C41.2274 496.397 23.6026 478.773 12.5571 457.094C0 432.45 0 400.188 0 335.665V184.335Z"
+        fill="#EEFF30"
+      />
+    </mask>
+    <g mask="url(#mask0_227_285)">
+      <rect y="0.751831" width="520" height="520" fill="#172DD7" />
+      <path
+        d="M176.484 428.831C168.649 428.831 162.327 425.919 158.204 420.412C153.966 414.755 152.861 406.857 155.171 398.749L164.447 366.178C165.187 363.585 164.672 360.794 163.059 358.636C161.446 356.483 158.921 355.216 156.241 355.216H129.571C121.731 355.216 115.409 352.308 111.289 346.802C107.051 341.14 105.946 333.242 108.258 325.134L140.124 213.748L143.642 201.51C148.371 184.904 165.62 171.407 182.097 171.407H214.009C217.817 171.407 221.167 168.868 222.215 165.183L232.769 128.135C237.494 111.545 254.742 98.048 271.219 98.048L339.468 97.9264L389.431 97.9221C397.268 97.9221 403.59 100.831 407.711 106.337C411.949 111.994 413.054 119.892 410.744 128L396.457 178.164C391.734 194.75 374.485 208.242 358.009 208.242L289.607 208.372H257.706C253.902 208.372 250.557 210.907 249.502 214.588L222.903 307.495C222.159 310.093 222.673 312.892 224.291 315.049C225.904 317.202 228.428 318.469 231.107 318.469C231.113 318.469 276.307 318.381 276.307 318.381H326.122C333.959 318.381 340.281 321.29 344.402 326.796C348.639 332.457 349.744 340.355 347.433 348.463L333.146 398.619C328.423 415.209 311.174 428.701 294.698 428.701L226.299 428.831H176.484Z"
+        fill="#F0FF41"
+      />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+svg > g > rect {
+  fill: black;
+}
+
+.dark-theme svg > g > rect {
+  fill: white;
+}
+
+svg > g > path {
+  fill: var(--comfy-yellow);
+}
+
+.dark-theme svg > g > path {
+  fill: var(--comfy-blue);
+}
+</style>
diff --git a/src/components/topbar/TopMenubar.vue b/src/components/topbar/TopMenubar.vue
index e126bad67a..87dd627fee 100644
--- a/src/components/topbar/TopMenubar.vue
+++ b/src/components/topbar/TopMenubar.vue
@@ -5,11 +5,7 @@
     class="comfyui-menu flex items-center"
     :class="{ dropzone: isDropZone, 'dropzone-active': isDroppable }"
   >
-    <img
-      src="/assets/images/comfy-logo-mono.svg"
-      alt="ComfyUI Logo"
-      class="comfyui-logo ml-2 app-drag h-6"
-    />
+    <ComfyLogo class="user-select-none cursor-default ml-2 app-drag h-6 w-6" />
     <CommandMenubar />
     <div class="flex-grow min-w-0 app-drag h-full">
       <WorkflowTabs v-if="workflowTabsPosition === 'Topbar'" />
@@ -48,6 +44,7 @@ import { computed, onMounted, provide, ref } from 'vue'
 
 import Actionbar from '@/components/actionbar/ComfyActionbar.vue'
 import BottomPanelToggleButton from '@/components/topbar/BottomPanelToggleButton.vue'
+import ComfyLogo from '@/components/topbar/ComfyLogo.vue'
 import CommandMenubar from '@/components/topbar/CommandMenubar.vue'
 import CurrentUserButton from '@/components/topbar/CurrentUserButton.vue'
 import WorkflowTabs from '@/components/topbar/WorkflowTabs.vue'
@@ -128,14 +125,4 @@ onMounted(() => {
 :deep(.p-menubar-item-label) {
   line-height: revert;
 }
-
-.comfyui-logo {
-  user-select: none;
-  cursor: default;
-  filter: invert(0);
-}
-
-.dark-theme .comfyui-logo {
-  filter: invert(1);
-}
 </style>