[Public request] CSS customization for dark theme.
Opened this issue · 18 comments
Hi! by chance, anyone has a custom CSS script for Brief to change the colors to Dark (grey background, bright fonts, etc.)?
Thank you in advance!
Also, if a viable dark theme is suggested, it may become an official theme later.
Hello,
Please try this one :
Paste the content in the Brief option page's customize box.
(Edited)
This new one uses documented css variables at teh beginning of the files, so it is now very easy to change colors to user's wishes.
bb
Thank you @bb84000!
I modified your dark theme, please find that version here:
brief-custom-style-dark_b.css.txt
Hello,
I've add some items to the customization
Edited 20/12/2017 : New items can be customized, please see readme file
bb
Nice! However, "Organize" mode is unreadable. White text on an orange background? Is there some way to change that?
Hello,
Thank you for the Organize mode bug.
The new version correct this
Merry Christmas !
bb
Hello,
New version with proper optimize customization :
Please continue to find bugs or disfunction of this "theme"!
bb
Hello,
You can easily change colors. The feedname colors are here:
/* Feed name color */
--feedname: #f2f2f2 ;
--sel-feedname: #454545;
--sel-feedname-bkgr: #d2d2d2;
--over-feedname-bkgr: #c2c2c2;
Color scheme is
#rrggbb,
00 is no color, ff is full colour.
#000000 : black
#ffffff : white
#ff0000 : red
etc
bb
ShadowFox developer overdodactyl has recently written a preliminary Brief stylesheet to match his Firefox dark theme.
If anyone wants to help the dev with further modifications, you can open a new issue at the bug tracker with amendments and corrections.
@tanriol may be interested in considering it for an official theme as well given that it matches the rest of Firefox's dark theme.
I made one also here that follows the default Firefox Reader theme: https://github.com/clessley/Dark-Theme-for-Brief-RSS-Reader.
Read more here on this blog post.
I made this custom dark theme CSS, all icons replaced by emojis. Any enhancement is welcome, happy hacking :)
Update:
Replace restore icon of trashed feed
Well !
I will test it on windows...
bb
Looks very nice! I'm using it, thank you!
BTW, every time I open Brief there is a withe flash before the dark theme appears. Does anyone know how to avoid this behavior?
BTW, every time I open Brief there is a withe flash before the dark theme appears. Does anyone know how to avoid this behavior?
It is the Brief database loading time. As database grows with time, this time can become very long, specially when the hard disk is busy. There is a way to reset Brief.
Save the dark theme css file and export your feeds to opml file. Remember the Brief ID in the browser address bar.
Then go to the "storage/default/" folder in the firefox profile and delete the folders related to the Brief ID. Same operation in the storage/permanent/" folder .
Then copy the theme css file in the Options box.
Brief will reload the feeds and their contents.
bb
Looks very nice! I'm using it, thank you!
BTW, every time I open Brief there is a withe flash before the dark theme appears. Does anyone know how to avoid this behavior?
Seems we cant avoid it from CSS custom, the page source:
#custom-css was separated from other stylesheets and loaded last.
Maybe Link preload can, which requires a source code patch https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload
The problem here is that the custom CSS is loaded from script, and requires an async operation - likely a cross-process IPC, which can be slow. When/if I have time to get back to Brief, I'll look into speeding this up, unless someone does that before then.