This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

How do I override CSS in Reader View as of Firefox version 105?

more options

Any advice returned by Google seems to be obsolete or only worked perhaps in older versions of Firefox. The main idea of using userChrome.css to override the default styles for Reader View does not seem to work. My userChrome.css file does work on other items though (like removing the sidebar width restriction).

Whatever advice I find via Google perhaps cites outdated CSS selectors, but current selectors do not seem to be documented anywhere by Mozilla. Moreover, I cannot find any file on my local drive named aboutReader.css when using find or grep commands in bash, those this file name is alluded to when viewing a page in Reader View and then in turn viewing source on that transformed page.

Moreover, addons that would allow me to change the colors seem to be restricted in Reader View.

It does seem like something has changed in recent Firefox updates but I can't remember when I last saw, for instance, links in dark mode Reader View that were still pink (whereas now they are blue, and impossibly dark to see, especially when you are disabling as much blue light as possible through your operating system). I need a higher contrast color for links in dark mode Reader View so I can actually see them.

I can alternatively use the Tranquility Reader addon and have custom colors, but A) that addon does not work with the Automatic Reader View addon, whereby I can always have various sites appear in some sort of "reader view" whether the native one or Tranquility Reader, and B) hitting refresh when in Reader View will defeat some soft paywalls but this does not work with, e.g., Tranquility Reader, so I still would prefer to be able to custom colors in the native Reader View feature, rather than rely on an addon.

1. Where are the current styles for Reader View even documented? 2. Is overriding them now restricted? 3. Why did the link color change from pink to blue in newer versions of Firefox (this is a terrible accessibility bug)? 4 .Where is the alluded to aboutReader.css stylesheet actually stored on my computer (it doesn't seem to be a file on the filesystem in the Firefox profiles folder, it seems more like it is embedded in the Firefox binary/executable)? 5. Will Firefox settings ever allow us to set colors specifically for Reader View (I don't mean the override settings for all web pages, particularly web pages not being rendered in Reader View ... that setting does not help in Reader View, nor would it be the desired preference for pages not in Reader View)?

Thank you.

Any advice returned by Google seems to be obsolete or only worked perhaps in older versions of Firefox. The main idea of using userChrome.css to override the default styles for Reader View does not seem to work. My userChrome.css file does work on other items though (like removing the sidebar width restriction). Whatever advice I find via Google perhaps cites outdated CSS selectors, but current selectors do not seem to be documented anywhere by Mozilla. Moreover, I cannot find any file on my local drive named aboutReader.css when using find or grep commands in bash, those this file name is alluded to when viewing a page in Reader View and then in turn viewing source on that transformed page. Moreover, addons that would allow me to change the colors seem to be restricted in Reader View. It does seem like something has changed in recent Firefox updates but I can't remember when I last saw, for instance, links in dark mode Reader View that were still pink (whereas now they are blue, and impossibly dark to see, especially when you are disabling as much blue light as possible through your operating system). I need a higher contrast color for links in dark mode Reader View so I can actually see them. I can alternatively use the Tranquility Reader addon and have custom colors, but A) that addon does not work with the Automatic Reader View addon, whereby I can always have various sites appear in some sort of "reader view" whether the native one or Tranquility Reader, and B) hitting refresh when in Reader View will defeat some soft paywalls but this does not work with, e.g., Tranquility Reader, so I still would prefer to be able to custom colors in the native Reader View feature, rather than rely on an addon. 1. Where are the current styles for Reader View even documented? 2. Is overriding them now restricted? 3. Why did the link color change from pink to blue in newer versions of Firefox (this is a terrible accessibility bug)? 4 .Where is the alluded to aboutReader.css stylesheet actually stored on my computer (it doesn't seem to be a file on the filesystem in the Firefox profiles folder, it seems more like it is embedded in the Firefox binary/executable)? 5. Will Firefox settings ever allow us to set colors specifically for Reader View (I don't mean the override settings for all web pages, particularly web pages not being rendered in Reader View ... that setting does not help in Reader View, nor would it be the desired preference for pages not in Reader View)? Thank you.
Attached screenshots

Chosen solution

Hi ddfox, the userChrome.css file modifies user interface elements that are external to pages, and you can use a userContent.css file to modify elements within pages. It goes into the same folder as your userChrome.css file.

To inspect the current styles, you can use the regular Page Inspector (right-click > Inspect or Ctrl+Shift+i).

In the case of links, this is what I see:

To view the contents of the aboutReader.css file, you usually can click the link right there in the Rules panel. If that doesn't work, there's a copy on the source code site (sometimes files that differ between Windows/Mac/Linux are harder to find):

https://searchfox.org/mozilla-release/source/toolkit/themes/shared/aboutReader.css

Read this answer in context 👍 2

All Replies (4)

more options

Chosen Solution

Hi ddfox, the userChrome.css file modifies user interface elements that are external to pages, and you can use a userContent.css file to modify elements within pages. It goes into the same folder as your userChrome.css file.

To inspect the current styles, you can use the regular Page Inspector (right-click > Inspect or Ctrl+Shift+i).

In the case of links, this is what I see:

To view the contents of the aboutReader.css file, you usually can click the link right there in the Rules panel. If that doesn't work, there's a copy on the source code site (sometimes files that differ between Windows/Mac/Linux are harder to find):

https://searchfox.org/mozilla-release/source/toolkit/themes/shared/aboutReader.css

more options

ddfox said

3. Why did the link color change from pink to blue in newer versions of Firefox (this is a terrible accessibility bug)?

It looks like Firefox 104 switched from a lighter blue (body.dark{--link-foreground: #45a1ff;}) for unvisited links to the current darker blue. However, visited links remain pink.

more options

Hi jscher2000,

Thank you, I guess I was not paying attention, I think the main problem was I was trying to erroneously put my override in the wrong file (userChrome.css instead of userContent.css). Finally got the below override CSS block to work (not sure if it is perfect, but it seems to work):

@-moz-document url-prefix("about:reader") {

    body.dark a:link {
     color: #49dd00 !important;  /* green */
   }

}

Apologies, I'm not entirely certain how to format replies here, particularly code blocks.

Modified by ddfox

more options

No worries on the formatting. I use <pre> before and </pre> after. Otherwise, you need to type spaces before each line to invoke preformatting.