brief-rss / brief

RSS reader extension for Firefox
Other
214 stars 44 forks source link

[Public request] CSS customization for dark theme. #326

Open githubtefo opened 6 years ago

githubtefo commented 6 years ago

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!

tanriol commented 6 years ago

Also, if a viable dark theme is suggested, it may become an official theme later.

bb84000 commented 6 years ago

Hello,

Please try this one :

brief-custom-style-dark.zip

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

githubtefo commented 6 years ago

Thank you @bb84000! I modified your dark theme, please find that version here: brief-custom-style-dark_b.css.txt

bb84000 commented 6 years ago

Hello,

I've add some items to the customization

brief-custom-style-dark.zip

Edited 20/12/2017 : New items can be customized, please see readme file

bb

VillageCatDad commented 6 years ago

Nice! However, "Organize" mode is unreadable. White text on an orange background? Is there some way to change that?

bb84000 commented 6 years ago

Hello,

Thank you for the Organize mode bug.

The new version correct this

brief-custom-style-dark.zip

Merry Christmas !

bb

VillageCatDad commented 6 years ago

Merry Christmas, and thanks!

Although when I press organize now, the folder names are white font on white background. The feed names look fine, it’s just the folder names (when not hovering).

On Dec 25, 2017, at 2:59 PM, bb84000 notifications@github.com wrote:

Hello,

Thank you for the Organize mode bug.

The new version correct this

brief-custom-style-dark.zip https://github.com/ancestorak/brief/files/1586119/brief-custom-style-dark.zip Merry Christmas !

bb

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/ancestorak/brief/issues/326#issuecomment-353888405, or mute the thread https://github.com/notifications/unsubscribe-auth/AgVvX7yL_j27dUZS1A1UXEVBbv8lfpYEks5tD_62gaJpZM4Qzcjo.

bb84000 commented 6 years ago

Hello,

New version with proper optimize customization :

brief-custom-style-dark.zip

Please continue to find bugs or disfunction of this "theme"! bb

VillageCatDad commented 6 years ago

Thank you!

In normal reading mode, I’m still having an issue with the contrast between the selected folder and the folder name’s font color. See attached:

Maybe if the background highlight were a bit darker? It also washes out the unread article count.

Again, appreciate your work! Thanks again, S.

On Dec 26, 2017, at 5:24 AM, bb84000 notifications@github.com wrote:

Hello,

New version with proper optimize customization :

brief-custom-style-dark.zip https://github.com/ancestorak/brief/files/1587118/brief-custom-style-dark.zip Please continue to find bugs or disfunction of this "theme"! bb

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/ancestorak/brief/issues/326#issuecomment-353951839, or mute the thread https://github.com/notifications/unsubscribe-auth/AgVvXxN8BttWBPzkZF2KEZfZPVtv5S-Oks5tEMlogaJpZM4Qzcjo.

bb84000 commented 6 years ago

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

eberhardweber commented 6 years ago

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.

ghost commented 6 years ago

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.

lostthing commented 2 years ago

I made this custom dark theme CSS, all icons replaced by emojis. Any enhancement is welcome, happy hacking :)

ss

Update: Replace restore icon of trashed feed

brief_rss.css.txt

bb84000 commented 2 years ago

Well ! I will test it on windows... bb

githubtefo commented 2 years ago

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?

bb84000 commented 2 years ago

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

lostthing commented 2 years ago

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: ss

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

tanriol commented 2 years ago

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.

atomGit commented 1 month ago

here's another dark theme, albeit a very quick and dirty hack - i may improve it over time if i continue to use brief

click ```css html { background: #000 !important; } /* SIDEBAR */ #sidebar-splitter, #tag-list-splitter { border-left: 3px solid #626262 !important; border-right: unset !important; } #sidebar { background-color: #2b2b2b !important; } .sidebar-button { color: #ff6800 !important; } #sidebar-top { border-bottom: 3px solid #626262 !important; } #view-list { background-color: #353535 !important; padding-bottom: 10px !important; } #view-list > tree-item > .title { color: unset !important; } tree-box { border-bottom: 3px solid #626262 !important; } tree-folder { margin: 5px 0 5px 8px !important; } tree-folder-header { padding: 0 !important; border: none !important; } tree-folder-header > .toggle-collapsed { opacity: 0.4; } tree-folder-header > .toggle-collapsed { opacity: 1; } tree-folder:not(.selected) > tree-folder-header:hover { background-color: #455b76 !important; border-color: #2b2b2b !important; } tree-item { padding: unset !important; } tree-item:hover:not(.selected), tree-item > .title, tree-folder-header > .title, tree-folder-footer > .title { color: unset !important; } tree-item.selected, tree-folder.selected > tree-folder-header { background-color: #455b76 !important; border: none !important; } tree-item > .icon, tree-item > .system-icon { border: 1px solid #a2a2a2 !important; } /* ARTICLES PANE HEADER */ #feed-view-header { background: #2b2b2b !important; } #view-title-label { color: #ff6800 !important; } .controls { background: #000; } #searchbar { color: unset !important; } /* ARTICLES PANE */ body { background: #2b2b2b; } #feed-content .full-container { flex: 0 1 90% !important; max-width: 1200px !important; } .headline-container { flex: auto !important; overflow: visible !important; flex: 0 1 90% !important; max-width: 1200px !important; white-space: wrap !important; color: #a4a4a4 !important; } .headline-container:hover > .headline-header { background-color: #4a4a4a !important; } .headline-feed-name { height: unset !important; } .day-header { background: #bd1d1d !important; padding: 10px 0 10px 20px !important; font-weight: bold; } .headline-title { height: unset; white-space: wrap; overflow: visible; color: #deddda; } .full-container-inner { border: none !important; background: none !important; } .title-link { color: #bfbfbf; overflow: visible; } .content a { color: #ff6800; } .content { color: #deddda !important; text-align: unset !important; } ```