{{ widget.label || widget.name }}
diff --git a/src/renderer/extensions/vueNodes/widgets/components/layout/index.ts b/src/renderer/extensions/vueNodes/widgets/components/layout/index.ts
index 2ad3a48586..3fe46f52e4 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/layout/index.ts
+++ b/src/renderer/extensions/vueNodes/widgets/components/layout/index.ts
@@ -2,15 +2,13 @@ import { cn } from '@/utils/tailwindUtil'
export const WidgetInputBaseClass = cn([
// Background
- 'bg-zinc-500/10',
+ 'bg-node-component-widget-input-surface',
+ 'text-node-component-widget-input',
// Outline
'border-none',
- 'outline',
- 'outline-1',
- 'outline-offset-[-1px]',
- 'outline-zinc-300/10',
+ 'outline outline-offset-[-1px] outline-zinc-300/10',
// Rounded
- '!rounded-lg',
+ 'rounded-lg',
// Hover
'hover:outline-blue-500/80'
])
diff --git a/src/services/colorPaletteService.ts b/src/services/colorPaletteService.ts
index f83bd27d8d..0159fec192 100644
--- a/src/services/colorPaletteService.ts
+++ b/src/services/colorPaletteService.ts
@@ -12,6 +12,16 @@ import { downloadBlob, uploadFile } from '@/scripts/utils'
import { useNodeDefStore } from '@/stores/nodeDefStore'
import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
+const THEME_PROPERTY_MAP = {
+ NODE_BOX_OUTLINE_COLOR: 'node-component-border',
+ NODE_DEFAULT_BGCOLOR: 'node-component-surface',
+ NODE_DEFAULT_BOXCOLOR: 'node-component-header-icon',
+ NODE_DEFAULT_COLOR: 'node-component-header-surface',
+ NODE_TITLE_COLOR: 'node-component-header',
+ WIDGET_BGCOLOR: 'node-component-widget-input-surface',
+ WIDGET_TEXT_COLOR: 'node-component-widget-input'
+} as const satisfies Partial
>
+
export const useColorPaletteService = () => {
const colorPaletteStore = useColorPaletteStore()
const settingStore = useSettingStore()
@@ -78,6 +88,40 @@ export const useColorPaletteService = () => {
Object.assign(LGraphCanvas.link_type_colors, types, linkColorPalette)
}
+ function validThemeProp(
+ propertyMaybe: unknown
+ ): propertyMaybe is keyof typeof THEME_PROPERTY_MAP {
+ return (
+ (propertyMaybe as keyof typeof THEME_PROPERTY_MAP) in THEME_PROPERTY_MAP
+ )
+ }
+
+ function loadLitegraphForVueNodes(
+ palette: Colors['litegraph_base'],
+ colorPaletteId: string
+ ) {
+ if (!palette) return
+ const rootStyle = document.getElementById('vue-app')?.style
+ if (!rootStyle) return
+
+ for (const themeVar of Object.keys(THEME_PROPERTY_MAP)) {
+ if (!validThemeProp(themeVar)) {
+ continue
+ }
+ const cssVar = THEME_PROPERTY_MAP[themeVar]
+ if (colorPaletteId === 'dark' || colorPaletteId === 'light') {
+ rootStyle.removeProperty(`--${cssVar}`)
+ continue
+ }
+ const valueMaybe = palette[themeVar]
+ if (valueMaybe) {
+ rootStyle.setProperty(`--${cssVar}`, valueMaybe)
+ } else {
+ rootStyle.removeProperty(`--${cssVar}`)
+ }
+ }
+ }
+
/**
* Loads the LiteGraph color palette.
*
@@ -120,20 +164,19 @@ export const useColorPaletteService = () => {
* @param comfyColorPalette - The palette to set.
*/
const loadComfyColorPalette = (comfyColorPalette: Colors['comfy_base']) => {
- if (comfyColorPalette) {
- const rootStyle = document.documentElement.style
- for (const [key, value] of Object.entries(comfyColorPalette)) {
- rootStyle.setProperty('--' + key, value)
- }
- const backgroundImage = settingStore.get('Comfy.Canvas.BackgroundImage')
- if (backgroundImage) {
- rootStyle.setProperty(
- '--bg-img',
- `url('${backgroundImage}') no-repeat center /cover`
- )
- } else {
- rootStyle.removeProperty('--bg-img')
- }
+ if (!comfyColorPalette) return
+ const rootStyle = document.documentElement.style
+ for (const [key, value] of Object.entries(comfyColorPalette)) {
+ rootStyle.setProperty('--' + key, value)
+ }
+ const backgroundImage = settingStore.get('Comfy.Canvas.BackgroundImage')
+ if (backgroundImage) {
+ rootStyle.setProperty(
+ '--bg-img',
+ `url('${backgroundImage}') no-repeat center /cover`
+ )
+ } else {
+ rootStyle.removeProperty('--bg-img')
}
}
@@ -151,6 +194,10 @@ export const useColorPaletteService = () => {
const completedPalette = colorPaletteStore.completePalette(colorPalette)
loadLinkColorPalette(completedPalette.colors.node_slot)
loadLiteGraphColorPalette(completedPalette.colors.litegraph_base)
+ loadLitegraphForVueNodes(
+ completedPalette.colors.litegraph_base,
+ colorPaletteId
+ )
loadComfyColorPalette(completedPalette.colors.comfy_base)
app.canvas.setDirty(true, true)
diff --git a/src/services/dialogService.ts b/src/services/dialogService.ts
index 65917f273d..5c1d7b60e7 100644
--- a/src/services/dialogService.ts
+++ b/src/services/dialogService.ts
@@ -121,8 +121,7 @@ export const useDialogService = () => {
pt: {
pcCloseButton: {
root: {
- class:
- 'bg-gray-500 dark-theme:bg-neutral-700 w-9 h-9 p-1.5 rounded-full text-white'
+ class: 'bg-dialog-surface w-9 h-9 p-1.5 rounded-full text-white'
}
},
header: { class: 'py-0! px-6 m-0! h-[68px]' },
@@ -469,7 +468,7 @@ export const useDialogService = () => {
pcCloseButton: {
root: {
class:
- '!w-7 !h-7 !border-none !outline-none !p-2 !m-1.5 bg-gray-500 dark-theme:bg-neutral-700 text-white'
+ '!w-7 !h-7 !border-none !outline-none !p-2 !m-1.5 bg-dialog-surface text-white'
}
}
},
diff --git a/src/workbench/extensions/manager/components/manager/PackVersionBadge.vue b/src/workbench/extensions/manager/components/manager/PackVersionBadge.vue
index 5514688619..440a886af2 100644
--- a/src/workbench/extensions/manager/components/manager/PackVersionBadge.vue
+++ b/src/workbench/extensions/manager/components/manager/PackVersionBadge.vue
@@ -6,7 +6,7 @@
"
class="inline-flex items-center gap-1 rounded-2xl text-xs py-1"
:class="{
- 'bg-gray-100 dark-theme:bg-neutral-700 px-1.5': fill,
+ 'bg-dialog-surface px-1.5': fill,
'cursor-pointer': !isDisabled,
'cursor-not-allowed opacity-60': isDisabled
}"
diff --git a/tests-ui/tests/renderer/extensions/vueNodes/components/LGraphNode.spec.ts b/tests-ui/tests/renderer/extensions/vueNodes/components/LGraphNode.test.ts
similarity index 97%
rename from tests-ui/tests/renderer/extensions/vueNodes/components/LGraphNode.spec.ts
rename to tests-ui/tests/renderer/extensions/vueNodes/components/LGraphNode.test.ts
index 4800658f88..2d10edb2d6 100644
--- a/tests-ui/tests/renderer/extensions/vueNodes/components/LGraphNode.spec.ts
+++ b/tests-ui/tests/renderer/extensions/vueNodes/components/LGraphNode.test.ts
@@ -171,8 +171,7 @@ describe('LGraphNode', () => {
mockData.mockNodeIds = new Set(['test-node-123'])
const wrapper = mountLGraphNode({ nodeData: mockNodeData })
expect(wrapper.classes()).toContain('outline-2')
- expect(wrapper.classes()).toContain('outline-black')
- expect(wrapper.classes()).toContain('dark-theme:outline-white')
+ expect(wrapper.classes()).toContain('outline-node-component-outline')
})
it('should apply executing animation when executing prop is true', () => {