Uibuilder markweb too dark

Ah! Sorry, I think I misunderstood.

Yes, you are seeing the browser default link colors.

OK, maybe ignore most of the blurb below as I wrote that as I was testing things.

Really annoyingly, this is the result of having the browser in light mode, I can reproduce it now. It happens on all browsers. I am always in dark mode so I don't notice. Sorry about that.

OK, so I need to do an update to apply link color overrides, at least for dark mode.

Hmm, interesting, looking at Chromium defaults:

recent user reports indicate that on macOS and potentially other platforms, these colors may appear as a very dark blue with low contrast, or black in light mode, which has caused user dissatisfaction. Developers have noted that standard link colors like blue can fail accessibility contrast requirements on black backgrounds, leading to ongoing efforts and bugs filed to improve visual distinction, such as shifting visited links to purple-500 or purple-600.
Not good.


Links should look like this:


The text to the right of the definition tells you where it comes from:

User Agent Stylesheet is the browser.

You can also look at the computed tab:


Which shows you what combined styles may be affecting the specific style. As you can see, that should say that the link color is purple, not the global default of blue.

It is odd that I'm not seeing the dark links. I don't believe I have any customisation on the browser and I just tried Brave which is my secondary browser (Vivaldi being the first) and both are, unsurprisingly, the same.

Hmm, OK, well it seems that I need another update!

As a work-around, though this won't work for the demo I'm afraid. You could add your own stylesheet to the page template. After the two existing external stylesheets, add the following (the given colors are the defaults, change as desired):

<style>
  /* Default and visited states */
  a:link {
    color: blue; /* <- this is the dark one, change this to maybe mediumpurple */
  }
  a:visited {
    color: purple;
  }

  /* Hover doesn't seem to be defined in Chromium */
  /* Hover state (must be after link/visited) */
  a:hover {
    color: red;
  }

  /* This is when you hold mouse down on the link */
  /* Active state (must be after hover) */
  a:active {
    color: orange;
  }   
</style>

You could also, as a more general work-around use the Stylus extension for your browsers to provide an override for your specific sites.

I don't really like to provide too many overrides for browser defaults as it can quickly get out of hand. It's weird that I can't reproduce the same issue in any of my browsers. Even Firefox. Here is a Markweb site with a pasted web article - I've not been to this before on Brave or Firefox. Brave is showing me the expected purple links. Firefox has a slightly different default:


Note that the MakeUseOf link is the one I clicked on in order to see the visited color.
In Vivaldi & Brave, I get this:

Noting that the visited link is slightly lighter.

OK, no need for work arounds. I've published v7.7.4 which fixes the link colour issue and a Node-RED v5 bug issue.

Great, all good now :slight_smile: