Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-03-13 17:10:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix dark mode card surface in workflow templates dialog (#2942)

Browse Source
This commit is contained in:
Christian Byrne
2025-03-10 06:57:19 -07:00
committed by GitHub
parent e29a5d3047
commit 3eb036b5e3
3 changed files with 38 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/dialog/content/manager/packCard/PackCard.vue
View File

@@ -1,8 +1,7 @@
<template>
<Card
class="absolute inset-0 flex flex-col overflow-hidden rounded-2xl shadow-[0_0_15px_rgba(0,0,0,0.15),0_10px_15px_-3px_rgba(0,0,0,0.12),0_4px_6px_-4px_rgba(0,0,0,0.08)] transition-all duration-200"
class="absolute inset-0 flex flex-col overflow-hidden rounded-2xl shadow-elevation-4 dark-theme:bg-dark-elevation-1 transition-all duration-200"
:class="{
'bg-[#ffffff08]': !isLightTheme,
'outline outline-[6px] outline-[var(--p-primary-color)]': isSelected
}"
:pt="{
@@ -89,12 +88,10 @@
<script setup lang="ts">
import Card from 'primevue/card'
import { computed } from 'vue'
import ContentDivider from '@/components/common/ContentDivider.vue'
import PackInstallButton from '@/components/dialog/content/manager/PackInstallButton.vue'
import PackIcon from '@/components/dialog/content/manager/packIcon/PackIcon.vue'
import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
import type { components } from '@/types/comfyRegistryTypes'
import { formatNumber } from '@/utils/formatUtil'
@@ -102,9 +99,4 @@ defineProps<{
nodePack: components['schemas']['Node']
isSelected?: boolean
}>()
const colorPaletteStore = useColorPaletteStore()
const isLightTheme = computed(
() => colorPaletteStore.completedActivePalette.light_theme
)
</script>

2
src/components/templates/TemplateWorkflowCard.vue
View File

@@ -2,7 +2,7 @@
<Card
ref="cardRef"
:data-testid="`template-workflow-${template.name}`"
class="w-64 template-card rounded-2xl overflow-hidden cursor-pointer shadow-[0_10px_15px_-3px_rgba(0,0,0,0.08),0_4px_6px_-4px_rgba(0,0,0,0.05)]"
class="w-64 template-card rounded-2xl overflow-hidden cursor-pointer shadow-elevation-2 dark-theme:bg-dark-elevation-1"
:pt="{
body: { class: 'p-0' }
}"

37
tailwind.config.js
View File

@@ -179,9 +179,44 @@ export default {
textColor: {
muted: 'var(--p-text-muted-color)',
highlight: 'var(--p-primary-color)'
},
/**
* Box shadows for different elevation levels
* https://m3.material.io/styles/elevation/overview
*/
boxShadow: {
'elevation-0': 'none',
'elevation-1':
'0 0 2px 0px rgb(0 0 0 / 0.01), 0 1px 2px -1px rgb(0 0 0 / 0.03), 0 1px 1px -1px rgb(0 0 0 / 0.01)',
'elevation-2':
'0 0 10px 0px rgb(0 0 0 / 0.06), 0 6px 8px -2px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.04)',
'elevation-3':
'0 0 15px 0px rgb(0 0 0 / 0.10), 0 8px 12px -3px rgb(0 0 0 / 0.09), 0 3px 5px -4px rgb(0 0 0 / 0.06)',
'elevation-4':
'0 0 18px 0px rgb(0 0 0 / 0.12), 0 10px 15px -3px rgb(0 0 0 / 0.11), 0 4px 6px -4px rgb(0 0 0 / 0.08)',
'elevation-5':
'0 0 20px 0px rgb(0 0 0 / 0.14), 0 12px 16px -4px rgb(0 0 0 / 0.13), 0 5px 7px -5px rgb(0 0 0 / 0.10)'
},
/**
* Background colors for different elevation levels
* https://m3.material.io/styles/elevation/overview
*/
backgroundColor: {
'dark-elevation-0': 'rgba(255, 255, 255, 0)',
'dark-elevation-1': 'rgba(255, 255, 255, 0.01)',
'dark-elevation-2': 'rgba(255, 255, 255, 0.03)',
'dark-elevation-3': 'rgba(255, 255, 255, 0.04)',
'dark-elevation-4': 'rgba(255, 255, 255, 0.08)',
'dark-elevation-5': 'rgba(255, 255, 255, 0.12)'
}
}
},
plugins: []
plugins: [
function ({ addVariant }) {
addVariant('dark-theme', '.dark-theme &')
}
]
}