Change node label color - e.g. for nodes w/ dark background

[ralphwetzel]

Hi!
It seems that currently nodes always use black as color for the labels.
This looks good for nodes, that use a light background color. For darker background colors, the label yet is (almost) unreadable.

I would like to propose to add a logic

1. to use white as the default label color for dark backgrounds.
2. to give node designers the option to define a dedicated label color - if they don't like the default setting.

If confirmed, I could propose a PR.

[dceejay]

or the node designer could choose a colour that makes the label readable ?

[cymplecy]

I'm with Dave. Maybe raise an issue with the author of nodes that are too dark.

[ralphwetzel]

Just discovered that my assumption was wrong:
The appearance of the label can already (& quite easily) be defined via the labelStyle property.

...
labelStyle: "message_label_style",
...

<style>
    .message_label_style {
        fill: white;
    }
</style>

So there's no need for any change. Perfect!

[knolleary]

The labelStyle property was not intended to be used to change the colour of the label.

We want some degree of consistency with the node appearance. Changing text colour goes against that principle. The docs on node appearance recommend using a lighter shade for the node colour to ensure good contrast with the label.

[ralphwetzel]

That makes perfect sense.
You could perhaps amend

@knolleary

The labelStyle property was not intended to be used to change the colour of the label.

to the chapter of labelStyle to underline this aspect.

[OriolFM]

I understand to want consistency.

However, most editors allow you to define text colours in case of light/dark backgrounds. People with daltonism or visual problems would greatly benefit from being able to increase the contrast, no matter if dark-on-light or the other way around.

I do not suffer from daltonism, but my sight is not what it was, and when I'm tired it's getting difficult to read from the screen, specially with light backgrounds. This is one of the reasons I changed to the dark theme for the editor, but the node names are still black on white. I tend to put many of them in subflows, which I can set up to be darker, but then the text is barely visible.

I'd be glad to be able to change that.

[TotallyInformation]

Don't know if this helps or not, but I recently discovered that there is a CSS media query that picks up on the light/dark browser preference.

So for example, the next version of uibuilder will have a default CSS sheet containing things like this:

 /* :root applies to everything */
:root {
    --uib-color-light: 201, 209, 217;
    --uib-color-dark:  36, 36, 36;
    --uib-color-info:  23, 162, 184; /* Cyan  */
    --uib-color-warn:  255, 193, 7;  /* Amber */
    --uib-color-error: 220, 53, 69;  /* Red   */
    --uib-color-primary:   0, 123, 255;   /* Blue  */
    --uib-color-secondary: 108, 117, 125; /* Grey  */
    --uib-color-success:   40, 167, 69;   /* Green */

    --uib-color-fg: var(--uib-color-dark);
    --uib-color-bg: var(--uib-color-light);
}

/* If the browser reports it, we can adjust for light/dark theme preferences */
@media (prefers-color-scheme: light) {
    :root {
        --uib-color-fg: var(--uib-color-dark);
        --uib-color-bg: var(--uib-color-light);
    }
}
@media (prefers-color-scheme: dark) {
    :root {
        --uib-color-fg: var(--uib-color-light);
        --uib-color-bg: var(--uib-color-dark);
    }
}

/* Apply `class="uib" to body tag if desired */
body.uib {
    margin: 1rem;
    font-family: sans-serif;
    background-color: rgb(var(--uib-color-bg));
    color: rgb(var(--uib-color-fg));
}

Which will switch your UI between light and dark depending on the current browser settings.

[Colin]

@OriolFM

the node names are still black on white.

Can you give an example of where you are seeing that please?

[OriolFM]

Sorry, I expressed that wrong. I meant "Black on whatever background color the node has".