diff --git a/src/composables/node/useNodeBadge.ts b/src/composables/node/useNodeBadge.ts index be629bd03..419beb3c4 100644 --- a/src/composables/node/useNodeBadge.ts +++ b/src/composables/node/useNodeBadge.ts @@ -12,6 +12,7 @@ import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore' import { useSettingStore } from '@/stores/settingStore' import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore' import { NodeBadgeMode } from '@/types/nodeSource' +import { adjustColor } from '@/utils/colorUtil' /** * Add LGraphBadge to LGraphNode based on settings. @@ -96,21 +97,28 @@ export const useNodeBadge = () => { if (node.constructor.nodeData?.api_node) { const creditsBadge = computed(() => { + // Use dynamic background color based on the theme + const isLightTheme = + colorPaletteStore.completedActivePalette.light_theme return new LGraphBadge({ text: '', iconOptions: { unicode: '\ue96b', fontFamily: 'PrimeIcons', - color: '#FABC25', - bgColor: '#353535', + color: isLightTheme + ? adjustColor('#FABC25', { lightness: 0.5 }) + : '#FABC25', + bgColor: isLightTheme + ? adjustColor('#654020', { lightness: 0.5 }) + : '#654020', fontSize: 8 }, fgColor: colorPaletteStore.completedActivePalette.colors.litegraph_base .BADGE_FG_COLOR, - bgColor: - colorPaletteStore.completedActivePalette.colors.litegraph_base - .BADGE_BG_COLOR + bgColor: isLightTheme + ? adjustColor('#8D6932', { lightness: 0.5 }) + : '#8D6932' }) })