How can I change link colors in Firefox and Chrome, but leave all other colors and fonts as they are?

Firefox

You can do this by editing (or creating if it is not there) the file userContent.css. Its location depends on the platform (the parent folder can also be found in menu Help → "Troubleshooting Information" → section "Application Basics" → field "Profile Folder"):

Linux

$HOME/.mozilla/firefox/[xyz].default-release/chrome/userContent.css

Windows

Depending on the Windows version and other configuration, userContent.css is in one of the following folders:

C:\Documents and Settings\[username]\Application Data\Mozilla\Firefox\Profiles\[xyz].default\chrome.
C:\Users\[username]\AppData\Roaming\Mozilla\Firefox\Profiles\[xyz].default\chrome (more generally, it is %APPDATA%\Mozilla\Firefox\Profiles\[xyz].default\chrome).

Common for Linux and Windows

You may have to create the chrome subdirectory and the file userContent.css.

Add these lines to that file to change the colors (obviously, you can change the actual colors used to whatever you prefer - e.g. using Paletton Live Colorizer):

a { color: #333388!important; }  /* Unvisited link color */

a:visited { color: #333340!important; }  /* Visited link color */

In most cases Firefox has to be restarted before it takes effect.

Also, for later version of Firefox (69 and later), check that toolkit.legacyUserProfileCustomizations.stylesheet in about:config is true. In some cases it is automatically set to true when file userContent.css is created, but that is not always the case.

Chrome

You can do the same for Chrome by editing $HOME/.config/google-chrome/Default/User\ StyleSheets/Custom.css which on Windows, is located at %USERPROFILE%\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css.

terdon

Posted 2013-08-29T14:29:14.383

Reputation: 45 216

The name of the last folder seems to have changed, -[number] is appended: [xyz].default-[number]. Sample: ... \Application Data\Mozilla\Firefox\Profiles\yynxpuma.default-1439568940109 – Peter Mortensen – 2016-04-23T11:21:58.793

+1: This worked as advertised when tried with Firefox 45.0.2 (current as of 2016-04-23), but only after *restarting Firefox*. Can you add some of this information to your answer? – Peter Mortensen – 2016-04-23T12:05:46.690

@PeterMortensen would you mind doing it instead? I don't have access to a Windows machine so I can't test it and I'm not entirely sure what I should add. – terdon – 2016-04-23T17:31:17.233

@Johannes: I can *not* confirm that the correct Windows path is the ...Local... one. After a long series of controlled experiments I can conclude that %APPDATA%\Mozilla\Firefox\Profiles\[xyz].default\chrome works perfectly fine (when using "/* */ as comment characters"). Or perhaps that was for a different context (the file name is different)? – Peter Mortensen – 2018-07-18T08:26:09.637

This seems like an unfair hard requirement on behalf of FF, it is not how I expect CSS to work according to specs. I wonder if these rules can be overriden without an additional stylesheet just to please browsers... like the old days of IE6/7/8/9/11 – Amy Pellegrini – 2019-03-12T13:13:03.723

1@AmyPellegrini hmm? What requirement? What isn't how you would expect CSS to work? – terdon – 2019-03-12T13:16:43.957

I'm using a brand new FF installation, and it comes with a PreferenceStylesheet with style rules that override my application styles. I never set such a thing, but now I find in the need to override those styles, or the get around what this PreferenceStylesheet is about. – Amy Pellegrini – 2019-03-12T13:19:20.903

@AmyPellegrini not sure what you mean, but it sounds like you want to contact the firefox devs. I'm just the messenger :). – terdon – 2019-03-12T13:24:40.730

@JoBo you're quite right, I thought it only applied to the links. I am trying to figure out how to do this via CSS, it should be possible. As for the link, it is an answer when it is only part of a larger answer and when the link is to a resource that does what you need. Link only answers refer to, well, link only answers. – terdon – 2013-08-29T15:02:36.467

1I am looking for a comprehensive, to the point answer that let's others who suffer the same benefit as easy as possible without further searching/reading and without installing any add ons. – Johannes – 2013-08-29T15:06:38.447

@JoBo will that do? – terdon – 2013-08-29T15:12:08.263

Not quite, but it's getting there. blue and green aren't the "classic blue'ish" colors. I don't know what to use here. I am terrible at design stuff. Sth. like rgb(16, 134, 164) or so? The correct Windows path is %USERPROFILE%\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css. – Johannes – 2013-08-29T18:48:12.280

@JoBo I don't know what colors you want, that's up to you. Have a look at sites like http://colorschemedesigner.com/, they give your the HEX code (RGB) for each color you chose. CSS can understand those, so for example, to make your links red, you would use color: #FF0000. And the path you gave is exactly the same one I had apart from the capitalization which should make no difference in the Windows world right?

– terdon – 2013-08-29T18:54:42.360

Related (to the accepted answer): How can I override the CSS of a site in Firefox with userContent.css?

– Peter Mortensen – 2019-11-17T01:26:38.170

Similar for Thunderbird (using the same files, for font size): How can I change the font size of a Thunderbird thread list on a Mac?

– Peter Mortensen – 2020-01-04T00:40:30.593