mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-02-21 02:56:40 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(editor): Make connector buttons background opaque when dark mode is enabled system-wide (#13180)

Browse source
This commit is contained in:
autologie 2025-02-12 09:05:42 +01:00 committed by GitHub
parent 9324e4ffe6
commit 77be25d337
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 14 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.vue
View file

@ -76,12 +76,12 @@ const edgeStyle = computed(() => ({
...props.style,
...(isMainConnection.value ? {} : { strokeDasharray: '8,8' }),
strokeWidth: 2,
stroke: props.hovered ? 'var(--color-primary)' : edgeColor.value,
stroke: delayedHovered.value ? 'var(--color-primary)' : edgeColor.value,
}));
const edgeClasses = computed(() => ({
[$style.edge]: true,
hovered: props.hovered,
hovered: delayedHovered.value,
'bring-to-front': props.bringToFront,
}));
@ -94,7 +94,7 @@ const isConnectorStraight = computed(() => renderData.value.isConnectorStraight)
const edgeToolbarStyle = computed(() => ({
transform: `translate(-50%, -50%) translate(${labelPosition.value[0]}px, ${labelPosition.value[1]}px)`,
...(props.hovered ? { zIndex: 1 } : {}),
...(delayedHovered.value ? { zIndex: 1 } : {}),
}));
const edgeToolbarClasses = computed(() => ({

12
packages/editor-ui/src/components/canvas/elements/edges/CanvasEdgeToolbar.vue
View file

@ -66,11 +66,21 @@ function onDelete() {
</style>
<style lang="scss">
[data-theme='dark'] .canvas-edge-toolbar-button {
@mixin dark-button-styles {
--button-background-color: var(--color-background-base);
--button-hover-background-color: var(--color-background-light);
}
@media (prefers-color-scheme: dark) {
body:not([data-theme]) .canvas-edge-toolbar-button {
@include dark-button-styles();
}
}
[data-theme='dark'] .canvas-edge-toolbar-button {
@include dark-button-styles();
}
.canvas-edge-toolbar-button {
border-width: 2px;
}