How to edit CSS / Styling of Firefox Reader View

user_1942772 0
Viewed 3212

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!

firefox-reader-view styling firefox css
2 Answers

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.

user_83929190

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

user_32515380
Related