Join the AMA (Ask Me Anything) with the Firefox leadership team to celebrate Firefox 20th anniversary and discuss Firefox’s future on Mozilla Connect. Mark your calendar on Thursday, November 14, 18:00 - 20:00 UTC!

为提升您的使用体验,本站正在维护,部分功能暂时无法使用。如果本站文章无法解决您的问题,您想要向社区提问的话,请到 Twitter 上的 @FirefoxSupport 或 Reddit 上的 /r/firefox 提问,我们的支持社区将会很快回复您的疑问。

搜索 | 用户支持

防范以用户支持为名的诈骗。我们绝对不会要求您拨打电话或发送短信,及提供任何个人信息。请使用“举报滥用”选项报告涉及违规的行为。

详细了解

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.
已附加屏幕截图

被采纳的解决方案

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

定位到答案原位置 👍 2

所有回复 (4)

more options

选择的解决方案

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.

由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.