Solarized Light and Dark themes for Firefox Reader

reader-solarized.css

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url-prefix("about:reader") {
  body.light {
    color: #657b83; /* base00 */
    background-color: #fdf6e3; /* base3 */
  }

  body.dark {
    color: #839496; /* base0 */
    background-color: #002b36; /* base03 */
  }
  
  a,
  a:visited,
  a:hover,
  a:active {
    color: #268bd2; /* blue */
  }

  *::-moz-selection {
    background-color: #b58900; /* orange */
    color: #fdf6e3; /* base3 */
    text-shadow: none;
  }

  /* Override some controls and content styles based on color scheme */

  body.light > .container > .header > .domain {
    border-bottom-color: #657b83 !important; /* base00 */
  }

  body.dark > .container > .header > .domain {
    border-bottom-color: #839496 !important; /* base0 */
  }

  body.light blockquote {
    -moz-border-start: 2px solid #657b83 !important; /* base00 */
  }

  body.dark blockquote {
    -moz-border-start: 2px solid #839496 !important; /* base0 */
  }
}

@Perlence How to use this css? Do I need to save this file somewhere? I am on Ubuntu 20.04.2

Hey @anishmittal2020, the way it used to work is by creating a style in Stylus and copying the code there. However, it no longer works like that because Firefox has stopped allowing the extensions to access "system" pages, one of which is "about:reader".

There may be other ways to change the built-in styles. However, I think, the style above won't work as is, because the layout of the reader has probably changed since 2015.

So, you don't use Solarized themes for Firefox reader anymore?

No, I don't.