Comments

Chris Morgan wrote:

1. Two other techniques you could use for installing user styles:

   1. Use an extension like Stylus.
   2. If in Firefox, enable the layout.css.moz-document.content.enabled pref, add the desired CSS to {profile}/chrome/userContent.css, and restart the browser.

2. A foolish optimisation in the user script: since appendChild returns the appended child, you don’t need to store it or look it up. Personally I’d also use textContent instead of innerHTML, though it doesn’t actually matter:

   document.head.appendChild(document.createElement('style')).textContent = 'a:visited {color: #518}'

3. So long as the page used color-scheme: dark or similar appropriately (normally the case for dark pages, seldom remembered for dark sections of light pages), there are two ways to get a different visited link colour on dark backgrounds:

   color: VisitedText;
   color: light-dark(#518, #96b);

4. A related possibility: force link underlines. Some browsers provide a native way of forcing them (Firefox does), but I’ve become partial to a semitransparent-when-not-hovered style since about 2018. From my own user styles:

   :any-link {
           text-decoration: underline color-mix(in srgb, currentColor 30%, transparent) !important;
           /* These are two extra properties not caught by the text-decoration shorthand, but relevant to reset. */
           text-underline-offset: unset !important;
           text-decoration-skip-ink: unset !important;
   }

Chris Morgan wrote:

Correction to my last comment: toolkit.legacyUserProfileCustomizations.stylesheets is the Firefox pref to enable userContent.css. (layout.css.moz-document.content.enabled makes @-moz-document work—quite useful in userContent.css, but distinct.)