Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Can I set different link colors for pages with light and dark backgrounds?

  • 6 replies
  • 0 have this problem
  • 1 view
  • Last reply by Terry

more options

I use userChrome.css and userContent.css to (1) turn unvisited links bright red, and (2) turn visited links bright purple, and (3) add underlines to all links.

This works well on light backgrounds, makes links easy to see and easy to distinguish from other text, but makes them harder to see on pages with dark backgrounds.

Is there a way to vary the link color to improve contrast? I can't use the default colors because most sites use blue links which are hard to distinguish from black text.

I use userChrome.css and userContent.css to (1) turn unvisited links bright red, and (2) turn visited links bright purple, and (3) add underlines to all links. This works well on light backgrounds, makes links easy to see and easy to distinguish from other text, but makes them harder to see on pages with dark backgrounds. Is there a way to vary the link color to improve contrast? I can't use the default colors because most sites use blue links which are hard to distinguish from black text.

All Replies (6)

more options

P.S. I already use a 1 pixel blur-shadow to bolden all text on Firefox on Linux Mint. If it's possible to use 2 shadows, I could perhaps use a white 5 px blur behind links, with a font-colored 1 px blur on top of that, with the font on top as usual.

more options

Hi Marja, it depends. Some sites are themed based on a signal from the browser about whether you prefer a light or dark theme. This would be one way to decide what text/background colors to apply to links. More info: https://developer.mozilla.org/docs/Web/CSS/@media/prefers-color-scheme

But some sites use a dark or light theme regardless of your browser's expressed preference, so in that case, you would need a script that can detect the appearance of the page in order to choose the best color scheme.

Are you currently using text-shadow? You can layer shadows starting from different positions, but it still has some transparency so this isn't very nice:

text-shadow: #eee -10px -5px 20px, #eee 10px 5px 20px, #eee -10px 5px 20px, #eee 10px -5px 20px;

Although it gives the link a crude appearance, what about a simple background color?

background-color: #ffe !important; border-radius: 4px;

Hopefully that won't be too blinding on dark-themed sites.

more options

There is text-shadow and box shadow that supports multiple colors apart from an outline, so you can possibly use a set for dark and white.

I'm not sure what is best in your case, so my try at subreddit FirefoxCSS.

more options

Note that websites can use an image as a clickable link (i.e. no text), so be cautious with using !important to override background-color as this can cause images to disappear.

more options

Thanks. I've tried the background color. It's a bit too intense. I think something which halfway lightens the backgrounds might work better.

more options

There's a user script called NoBrighter on greasyfork .org which may suit you. It is very simple to configure.