1

In most browsers, text links are usually underlined and in a different color from the surrounding ordinary text. I often find this very distracting, and I find it hard to concentrate on just reading a paragraph. This is especially noticeable, for instance, when reading articles on the New York Times, or any other major news site, because they "linkify" much of the text in their articles.

I would like to disable this so that all text links look the same as regular text. My ideal solution would be something that can be quickly toggled, so that I can turn the differentiation off when I want to concentrate on reading something, and turn it off if I want to surf as usual.

Is there an addon that can I do this? I currently use Firefox on my laptop, and Safari on my ipad.

1
  • 1
    Welcome to Software Recommendations! Please note this site is about recommending software, not assets or resources like howtos, manuals/tutorials, etc. I've slightly modified your question to make it on-topic and hope it matches what you wanted to ask about. Good luck!
    – Izzy
    Nov 21 '17 at 23:29
1

I just realized that this functionality is built-in to Firefox itself. In preferences, under "Language and appearance", there are options to change the color of both visited and unvisited links, as well as to disable underlining of links.

0

Although you can change link colors in browser preferences, it's not easy to toggle between settings. The Stylus extension, available for Chrome and Firefox, allows custom CSS to be applied to websites. They can be toggled by clicking on a checkbox.

After installing the extension, create a new stylesheet. Give it a name, and set it to apply to all webpages. The following should do what you describe in your question:

a {
   color: inherit !important;
   text-decoration: inherit !important;
}

a:active {
   color: inherit !important;
   text-decoration: inherit !important;
}

a:inactive {
   color: inherit !important;
   text-decoration: inherit !important;
}

a:hover {
   color: inherit !important;
   text-decoration: inherit !important;
}

Notes:

  • inherit tells the browser to use the setting from the parent element, which should match the surrounding text.
  • You can assign colors using standard hexadecimal notation, #000000. Some named colors are also available.
  • !important tells the browser to give the setting higher priority, so webpages won't override your setting.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.