Can I set different link colors for pages with light and dark backgrounds?
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)
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.
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.
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.
- https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow
- https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
I'm not sure what is best in your case, so my try at subreddit FirefoxCSS.
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.
Thanks. I've tried the background color. It's a bit too intense. I think something which halfway lightens the backgrounds might work better.
There's a user script called NoBrighter on greasyfork .org which may suit you. It is very simple to configure.