Our favorite open source RSS feed reader has come home to Firefox Web Extensions and we've made a dark theme inspired by the native Reader View. Come get it!
TLDR; You can find instructions below or on get it directly on GitHub.
GFST.com first read of the potential great migration of Firefox add-ons to the web extension format on Mozilla Hacks blog by staffer Dan Callahan on Oct 12, 2015. We were excited when Mozilla officially announced the migration to web extensions because we knew the core behind the web's world's best browser would make a quantum leap (see what I did there) into the future; better security, faster speed and a UI redesign (Australis is like 1970's-esque fashion). The increased speed and tools functionality we've seen added to Firefox since the official Nov 14th, 2017 update all but silenced the temper-tantrum bogeymen-trolls, Chrome-cloners and Palemoon radicals. Let them eat crow.
But like we wrote about FindBar tweak earlier, some extensions we absolutely love and use on a daily basis are missing (sorry Stylish, we're still not going back) or have succumbed to developer rot.
FYI: Are we WebExtensions yet? is a handy documentation site that can help you find the most popular add-ons that are still not quite web extensions compatible (FlashGot why do you hate us)?
The last omission in our daily browsing tool set was Brief, the open source RSS feed reader by Adam Kowalczyk and Denis Lisov. We confess we've used Feedbro (not libre) during the interim period but no more; how we have missed Brief!
Brief does everything we love and nothing we don't but if you run dark themes its hard to miss the glaring contrast of the default look. There are previous versions of darkish themes at Userstyles.org but they are not ideal or at the time of this article simply do not work. So we made one!
Here's how to get our dark theme for Firefox 58.0b10+ and beyond. Although not a perfect copy of the dark mode in the default Reader View our little experiment is quite close as shown below:
Once you have installed Brief in your Firefox browser, simply navigate to the extension options through the main add-ons menu or from Brief's top Options fly-out menu > Options. You'll see this:
At the bottom of the configuration page there is a text box labeled "Customize Brief's look" and it is here where you can copy our CSS code (be sure to paste as plain text). The change is immediate once you have closed the tab and re-open Brief.
#sidebar {
background-color: #2d2d2d !important;
min-width: 250px !important;
}
.sidebar-button {
color: rgb(196, 196, 196) !important;
}
#view-list > tree-item > .title {
color: rgb(196, 196, 196) !important;
}
tree-folder.selected > tree-folder-header,
tree-item.selected {
background-color: #222 !important;
}
tree-folder-footer > .title,
tree-folder-header > .title,
tree-item > .title {
color: rgb(196, 196, 196) !important;
}
#feed-view-header {
background: #2d2d2d !important;
}
#sidebar-splitter,
#tag-list-splitter {
border-left: 1px solid #2f2f2f !important;
}
body {
background: #2d2d2d !important;
}
#view-title-label,
.day-header,
.headline-feed-name,
.headline-title,
.title-link {
color: rgb(196, 196, 196) !important;
}
.title-hover {
color: #222 !important !important;
}
.full-container-inner {
background: initial !important;
}
.headline-header {
border-bottom: 1px solid #111 !important;
}
article.selected .headline-header {
border-left-color: #dd4814;
}
.headline-container:hover > .headline-header {
background-color: #222 !important;
}
.content {
color: rgb(196, 196, 196) !important;
}
tree-folder.selected > tree-folder-header,
tree-item.selected {
border-color: #222 !important;
}
#searchbar {
border-color: rgb(196, 196, 196) !important;
color: rgb(196, 196, 196) !important;
}
tree-folder:not(.selected) > tree-folder-header:hover {
border-color: #2d2d2d !important;
background-color: #2d2d2d!important;
}
tree-folder:not(.selected) > tree-folder-header:hover,
tree-item:hover:not(.selected) {
border-color: #222!important;
background-color: #222!important;
}
#feed-list.organize,
#organize-button.organize {
background-color: #2d2d2d!important;
}
We'd love to hear any comments or suggestions on this little dark theme for Brief. Please let us know what you think in our comment section below. If you want to see changes, feel free to open an issue on GitHub (or fork it).
