How to edit CSS / Styling of Firefox Reader View

Question

I want to include a font of my choice in Firefox Reader View Styling.

Please let me know if Firefox uses a local CSS file for styling or it is located somewhere else?

Moreover What is the CSS File name Firefox uses for Reader View and how can I edit the same.

Thanks in Advance!

Callous

Ain't the whole point with reader view that the content is rendered without the developers interference ? There is a css-file aboutReader.css included. More suitable would be to ask a question on the project it self => github.com/mozilla/readability – Obsolescent

Answer 1

You find the CSS file for the "Firefox Reader View" under the path cd /home/$USER/.mozilla/firefox/<PROFILE_FOLDER>/chrome/userContent.css only if you already did set it up:

1. Enter in your Firefox URL-search-bar: about:support.
2. Open your Profile Folder by selecting Show Folder.
3. Create a new folder inside your profile folder called chrome.
4. Navigate into chrome and create a new plain-text file called userContent.css
5. Edit userContent.css according to your CSS preferences.
6. In new Firefox profiles, starting from Firefox 69, you additionally have to enable toolkit.legacyUserProfileCustomizations.stylesheets in about:config, cf. Firefox 69: userChrome.css and userContent.css disabled by default.

---

In my case it looked like the following:

cd /home/$USER/.mozilla/firefox/<PROFILE_FOLDER>/
mkdir chrome
cd ./chrome
touch userContent.css

CSS-Example:

@-moz-document url-prefix("about:reader") {
  body.dark {
    color: salmon !important;
    background-color: black !important;
  }
  body.light {
    color: #222 !important;
    background-color: #EEE !important;
  }
  body.sepia {
    color: #5B4636 !important;
    background-color: #F4ECD8 !important;
  }

  body.serif {
    font-family: serif !important;
  }
  body.sans-serif {
    font-family: sans-serif !important;
  }
}

See this Reference for further explanations.

Meanie

What if I'm on Windows? – Admit

In new Firefox profiles, starting from Firefox 69, you additionally have to enable toolkit.legacyUserProfileCustomizations.stylesheets in about:config, cf. Firefox 69: userChrome.css and userContent.css disabled by default. – Sowder

@mach: This doesn't seem to work anymore: userContent.css is ignored. Too bad, since the default typewriter fonts are unreadable on certain screens. – Exophthalmos

This seems like a lot just to change the font. Why is Mozilla so scared to allow users customizing their reader experience? – Broker

@MerajalMaksud I would presume %APPDATA%/Mozilla/Firefox/Profiles/<profile>/chrome/userContent.css – Arezzo

Is there a way to do this without needing !important on every rule? – Alchemize

Answer 2

You don't need to add or change .css, follow these steps:

1. In address bar, type about:config, then click the button to accept the risk.

2. In the search box, type or paste the new preference name: pdfjs.viewerCssTheme

3. Double-click to edit and set the value to 2 for a dark theme, then click the blue checkmark button to save the change. (0 = default, 1 = light).

Susa