Create a gist now

Instantly share code, notes, and snippets.

@rugk /CHANGELOG.md
Last active Sep 25, 2016

What would you like to do?
Stylish reader mode extensions: columns, custom width and real dark background

Firefox reader mode: real black background, columns & custom width

Firefox has the new reader mode (about:reader) to facilitate reading of (almost) any article in a simple, pleasant, constant style. However, the width of the article view is remarkably thin for a single column. Meh... change. This styles allows to customize the width of the view but also to use a layout with more than a single column, making it more akin to a newspaper.

This style based on style 114669 by user 13655. It adds the feature to choose other colors for the dark background mode - where I prefer #000000 as a real dark black. This also works on Firefox for Android and is usable for AMOLED devices, where the #000000 black looks really nice and saves energy.

Screenshot:
screenshot

Userstyles.org config: https://i.imgur.com/VgTvZwJ.png

Download: https://userstyles.org/styles/120855/ff-reader-mode-real-dark-background-col-width

To install this from GitHub you should use stylish_readermode_default.css and possibly you also have to pay attention to some things. You might be able to install it using this link.

Changelog.md

2016-09-25

  • removed static width as it breaks the width changing mechanism of Firefox 49

2015-11-25

  • improved comments in css files
  • better config on userstyles.org
/*
Link: https://userstyles.org/styles/120855/ff-reader-mode-real-dark-background-col-width
Licensed under [CC-BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/) by [MiV](https://userstyles.org/users/13655).
Edited by [rugk](https://userstyles.org/users/302864).
Original version: https://userstyles.org/styles/114669/firefox-reader-custom-width-multi-column
Available on GitHub: https://gist.github.com/rugk/6dd70c50c35ee750cb88
*/
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix("about:reader") {
body.dark {
color: /*[[darkcolor]]*/ !important;
background-color: /*[[darkbgcolor]]*/ !important;
}
.dark-button {
color: /*[[darkcolor]]*/ !important;
background-color: /*[[darkbgcolor]]*/ !important;
}
}
/*
Link: https://userstyles.org/styles/120855/ff-reader-mode-real-dark-background-col-width
Licensed under [CC-BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/) by [MiV](https://userstyles.org/users/13655).
Edited by [rugk](https://userstyles.org/users/302864).
Original version: https://userstyles.org/styles/114669/firefox-reader-custom-width-multi-column
Available on GitHub: https://gist.github.com/rugk/6dd70c50c35ee750cb88
*/
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix("about:reader") {
body.dark {
color: #F9F9F9 !important;
background-color: #000000 !important;
}
.dark-button {
color: #F9F9F9 !important;
background-color: #000000 !important;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment