Moritz KlackandGitHub
ab5eef220f
* feat(react/svelte): add dark mode defaults * refactor(darkmode): minimap, edges, edge labels * chore(style): edge label color * feat(colorMode): add colorMode prop light/dark/system * chore(examples): cleanup * test(colorMode): add tests * chore(base.css): add dark base * chore(examples): cleanup
39 lines
1019 B
CSS
39 lines
1019 B
CSS
.xy-flow {
|
|
--node-border-default: 1px solid #bbb;
|
|
--node-border-selected-default: 1px solid #555;
|
|
|
|
--handle-background-color-default: #333;
|
|
|
|
--selection-background-color-default: rgba(150, 150, 180, 0.1);
|
|
--selection-border-default: 1px dotted rgba(155, 155, 155, 0.8);
|
|
}
|
|
|
|
.xy-flow.dark {
|
|
--node-color-default: #f8f8f8;
|
|
}
|
|
|
|
.xy-flow__handle {
|
|
background-color: var(--handle-background-color, var(--handle-background-color-default));
|
|
}
|
|
|
|
.xy-flow__node-input,
|
|
.xy-flow__node-default,
|
|
.xy-flow__node-output,
|
|
.xy-flow__node-group {
|
|
border: var(--node-border, var(--node-border-default));
|
|
color: var(--node-color, var(--node-color-default));
|
|
|
|
&.selected,
|
|
&:focus,
|
|
&:focus-visible {
|
|
outline: none;
|
|
border: var(--node-border-selected, var(--node-border-selected-default));
|
|
}
|
|
}
|
|
|
|
.xy-flow__nodesselection-rect,
|
|
.xy-flow__selection {
|
|
background: var(--selection-background-color, var(--selection-background-color-default));
|
|
border: var(--selection-border, var(--selection-border-default));
|
|
}
|