Increase link brightness in dark mode

When I’m sitting in a bright environment, it’s a bit hard too read links (aka anchors) when in dark mode as the colour for the links is a little dark, even with my screen brightness turned up (I’m guessing it’s a contrast, not brightness, issue). Could we increase the link brightness in dark mode, or is this all managed by Discourse?

Edit: example link

4 Likes

[3 years later…]

I agree, the link contrast is way too low, sometimes I can hardly read them.

The ratio doesn’t meet the WCAG AA accessibility guidelines:

Chrome devtools suggests #428fd0 which gives 4.59:

That would gives us something much better:

image

Ideally this would be suggested and fixed upstream at https://meta.discourse.org, but as suggested by @CAM-Gerlach over here, admins can also add custom CSS.

3 Likes

Pinging the @admins on this one…

I say do it!

1 Like

Err, well, it requires someone with admin permissions, which is why I was asking you :slight_smile:

Then I need someone to give me the block of CSS to add (i.e. I will click buttons and pull levers, but don’t make me think; don’t have the time).

1 Like

Sure, sorry—combining a modified and refined version of @hugovk link underline CSS from this mentioned thread and adding the color suggested here, we have:

p a {
	color: #428fd0;
	text-decoration: underline;
	text-underline-offset: 2px;
}

In addition to adding the color, unlike the original this will apply only to links in paragraphs, as otherwise it affects a variety of other UI elements that are clickable links but are not links as their primary semantic purpose, and for which the underline and/or color don’t necessarily make sense (e.g. titles, headings, buttons, etc). Also, I greatly reduced the text-underline-offset to still improve legibility while being more similar to the typical convention on other sites and not look too “off”, and also specified it in CSS pixels, as it appears the actual offset only works in fixed stops of two CSS pixels, and it will only be used in p elements (which for our purposes have text of fairly consistent size.

CSS applied across all themes!

4 Likes

Thanks! Looks good so far; I’ll post here in case I notice anything off.

1 Like