How do I change edge label colors when a night theme is active?

[hamirmahal]

The edge label color looks just fine with a day theme active, but if I switch to a night theme, it becomes much harder to read.

    const cy = cytoscape({
      container: document.getElementById('cy'),
      elements,
      style: [
        {
          selector: 'edge',
          style: {
            color: '#333', // How do I update this when the theme changes?
            width: 3,
            'line-color': '#ccc',
            'target-arrow-color': '#ccc',
            'target-arrow-shape': 'triangle-backcurve',
            'curve-style': 'bezier',
            label: 'data(label)',
          },
        },
      ],
    })

[maxkfranz]

Change the styles when you detect a theme change.

If you'd like to add native support for theming within the lib (like native CSS theming), you're welcome to scope it out in an issue/PR.

[hamirmahal]

I usually use

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

to detect theme changes, but adding that behavior inside of

    const cy = cytoscape({
      container: document.getElementById('cy'),
      elements,
      style: [
        {
          selector: 'edge',
          style: {
            color: '#333', // How do I update this when the theme changes?
            width: 3,
            'line-color': '#ccc',
            'target-arrow-color': '#ccc',
            'target-arrow-shape': 'triangle-backcurve',
            'curve-style': 'bezier',
            label: 'data(label)',
          },
        },
      ],
    })

didn't seem to work properly.

[hamirmahal]

How do you usually support edge labels changing color when the user's theme changes?

[maxkfranz]

I'm sure you could do it with JS.

Typically, apps that have serious visualisations (e.g. biomed research apps), wherein the colours should be meaningful and consistent, you ought not to introduce the ambiguity of theming. Colour perception is relative, and dark themes throw things off. Dark themes don't work in academic figures (i.e. pdfs), either.

All that's to say, you could certainly support this yourself in your app today. It's not a high priority for us, as you can understand. In any case, it would be good to support this within the lib via a PR contribution.

Let's scope out this feature a bit more in terms of API and then put together a pull request.

Supporting media selectors would be expensive, but perhaps much easier-to-implement pseudoselectors like ':light' and ':dark' would do. Then you could just trigger a styler recalculation on the same JS event as you'd use in your prototype in your own app. Probably, the PR would be just a few lines of code; it would just need to be prototyped and tested well -- which you'll have to do for your own app anyway.

Looking forward to your response.