Can't change the default colors globally

[SciManJD]

I want to change the colors when the nodes are selected. There are two possibilities, described in the documentation - global change and just for specific node. The second way works. But I couldn't change the define --vf-node-color and --vf-box-shadow globally. There stay always with the old values. I just added the following code in my global css-file:

:root {
--vf-node-color: #28A37A;
--vf-box-shadow: #C2FFEB;
}

There is no change. Is there any example how this must be done in the right way?

[bcakmakoglu]

Seems to be a bug that you can't use the css vars with :root.
If you use it on a specific node type like vue-flow__node-input it's ok.

I'll fix the problem though (will be in 1.19.1)

[SciManJD]

I added this code:

    .vue-flow__node-input {
        --vf-node-color: #28A37A;
        --vf-box-shadow: #C2FFEB;
    }

If I understood correct, this should change the color for the node with input-type. But the color is not changed.

[bcakmakoglu]

Yeah both will be resolved with the next patch ^^

[SciManJD]

OK! Thanks!

[bcakmakoglu]

Also consider this only works for default nodes (input, default and output), custom nodes will have to be styled by you as these css vars won't apply to custom nodes :)

Easiest way to add a selected style to your nodes is something like this

.vue-flow__node.selected {
	/* your selected styles */
}

[SciManJD]

I have an additional question. I can change the default colors of the border and the background of the nodes when they are selected. But when I click on the node and don't release the mouse button, the style is the original one. Then when I release the mouse button, my new styles are applied. How can I fix this?