Add setting to change default link colors

Question

Can there be a setting for users to change the color of links that they have not followed, the ones they have followed, and the ones they hover over?

When I am on the active questions tab of a site, I find that the blue links are hard to distinguish from the light blue links that I have already followed, especially on a mobile device. I think there should be an option to change the default link colors in the settings menu.

I am not colorblind, and I consider myself to have good vision, but it can still be hard to see whether I have clicked the link before if I am using a small screen. If I could change the link colors, I would switch the un-clicked link color and the hover color so that the difference is easier to see.

There are also some people with color blindness or other vision impairments that would benefit from this. See here, here, and here for example, or just search "color blind" on meta.

I know there is a problem with changing it globally because some SE sites have different link colors, so how about having a color picker and a hex code box. Users can pick colors they want for each link type and copy the associated hex codes over to the settings for other sites.

Answer 1

Link colors are definitely a problem on some sites. I'd rather see SE fix the problem on those sites for everybody, rather than making us do our own overrides.

It's unlikely that they'll implement user preferences to do this, but if you're willing to do a little work you can change the link colors yourself by using the Stylus browser add-on. Here is some CSS that changes link colors in posts and comments:

.post-text a {color: #0000BB !important;}
.post-text a:visited {color: #BB00BB !important;}
.comment-body a {color: #0000BB !important;}
.comment-body a:visited {color: #BB00BB !important;}

There are probably better ways; I am a CSS novice. Also, this doesn't get all the other links, like "show 37 more comments" and "start bounty", but you don't want to just change a and a:visited globally -- it messes up all sorts of things, like buttons and top-bar controls. (Tried that first.) It would definitely be better for SE to make link colors that contrast with both the surrounding text and between visited and unvisited.

Answer 2

Thank you @MonicaCellio for the information about Stylus.

Because it seems most on-topic here, I will provide a list of attributes that can be used to modify link colors on different parts of the site using this extension.

To do this, you will need the Stylus extension provided here.

In the menu, add a new style and set the applies to field.

Now you need to add attributes for links. Each attribute looks like this:

.post-text a:link {
color: #6abb00 !important;
}
.post-text a:visited {
color: #bb0025 !important;
}

One is for the link before it is clicked, and one is for the link after clicking. If you know CSS, you probably already know how to do this.

The part of the attribute that changes with the link is the first part with the period before it. That changes depending on the "class" property of any div elements that hold the link. Here are the ones I used:

• post-text - links in the body of questions and answers.
• comment-copy - links in the body of a comment
• summary - links in the Top/Hot Questions list
• module - links in the Hot Questions/Related/Linked/Blog/FAQ sidebar on the right of the page
• header - links in the headers of the top bar dropdowns
• modal-content - links in all of the top bar dropdowns
• nav-links - links in the left dropdown menu
• post-taglist - question tags
• comment-text - username of comment poster
• grid - links in the bottom of answers/questions, includes share/edit/flag and username of poster and editors
• bottom-notice - links in the "not what you're looking for?"/"not the answer you're looking for?" notice on the bottom of some pages

Just replace the text right after the period with the text you want. You can use multiple statements per line like this:

.post-text a:link, .comment-text a:link {
color: #6abb00 !important;
}

OR you can use multiple lines:

.post-text a:link {
color: #6abb00 !important;
}
.comment-text a:link {
color: #6abb00 !important;
}

Both of these examples will make unclicked links in posts and unclicked comment poster names colored.

If you are copying and pasting many lines of attributes, make sure the color is what you want before you start, because it will be a pain to change them all.

Here is the code I am using to change the color for all of the above attributes.

.post-text a:link {
    color: #6abb00 !important;
}
.post-text a:visited {
    color: #bb0025 !important;
}

.comment-copy a:link {
    color: #6abb00 !important;
}
.comment-copy a:visited {
    color: #bb0025 !important;
}

.summary a:link {
    color: #6abb00 !important;
}
.summary a:visited {
    color: #bb0025 !important;
}

.module a:link {
    color: #6abb00 !important;
}
.module a:visited {
    color: #bb0025 !important;
}

.modal-content a:link {
    color: #6abb00 !important;
}
.modal-content a:visited {
    color: #bb0025 !important;
}

.header a:link {
    color: #6abb00 !important;
}
.header a:visited {
    color: #bb0025 !important;
}

.nav-links a:link {
    color: #6abb00 !important;
}
.nav-links a:visited {
    color: #bb0025 !important;
}

.post-taglist a:link {
    color: #6abb00 !important;
}
.post-taglist a:visited {
    color: #bb0025 !important;
}

.comment-text a:link {
    color: #6abb00 !important;
}
.comment-text a:visited {
    color: #bb0025 !important;
}

.grid a:link {
    color: #6abb00 !important;
}
.grid a:visited {
    color: #bb0025 !important;
}

.bottom-notice a:link {
    color: #6abb00 !important;
}
.bottom-notice a:visited {
    color: #bb0025 !important;
}

If there are other links that don't appear colored, open Inspect Element and find a div that is a parent of the link. Use the class property in the attribute.