Dark theme

  • 93
  • Idea
  • Updated 3 months ago
I created my own Stylish customization for Google Reader (http://userstyles.org/styles/55679/go...) because I prefer reading over darker backgrounds. I find much more comfortable without a page shining a bright light on my face all the time.

So my suggestion is a simple one: could you add an option for a dark theme for NewsBlur? It's not a deal breaker, I mean I do know CSS so I'll just make my own theme if you don't add the option, but it's much better to do that directly than having an plugin changing that all the time.

I'm quite impressed with the website so far, I'm just testing it a little longer before I pull the plunge and get the premium service. :)

Cheers.
Photo of DivinoAG

DivinoAG

  • 36 Posts
  • 15 Reply Likes

Posted 7 years ago

  • 93
Photo of Samuel Clay

Samuel Clay, Official Rep

  • 6514 Posts
  • 1474 Reply Likes
What you want is a theme garden, but that's a ways off. I can write a Custom CSS box for you to copy+paste the theme into. It's not too much work, but I'm heads-down in a few other big ticket features. Would this work?
Photo of DivinoAG

DivinoAG

  • 36 Posts
  • 15 Reply Likes
I think so, for now I can work out my own theme, like I said it's not a big deal.

I imagine eventually people will start sharing some themes around, so just having a place to load our own custom CSS would be enough for the time being.

Thanks.
Photo of Autumn Corvus

Autumn Corvus

  • 3 Posts
  • 0 Reply Likes
Just learning my ways around NewsBlur for the first time today, seems really promising but a dark theme option would definitely make it easier to look at for hours every day.
Photo of Derek Lau

Derek Lau

  • 9 Posts
  • 4 Reply Likes
Oh sweet! A box to put in custom CSS code would be awesome!
Photo of chrisr

chrisr

  • 69 Posts
  • 3 Reply Likes
Any dark CSS blurbs for us less web inclined?
Photo of DivinoAG

DivinoAG

  • 36 Posts
  • 15 Reply Likes
I confess that I kinda forgot about this, since I'm still waiting for Samuel to find some time to add the CSS box (no pressure, it is what it is).

But since you mentioned, I decided to go ahead and try to make a style for use with the Stylish plugin. It's still a little rough around the edges, so as soon as I have something a little more consistent, I'll post it on userstyles.org and share the link here. Let me know if there is more interest on something like that.

I'm creating it based on the Developer version of Newsblur, since that new visual will be implemented soon.
Photo of chrisr

chrisr

  • 69 Posts
  • 3 Reply Likes
My fault... I got confused by the BlurBlog CSS box. Thanks for the reply.
Photo of Samuel Clay

Samuel Clay, Official Rep

  • 6514 Posts
  • 1474 Reply Likes
If I like it enough, I'll be tempted to push the custom css box through a little quicker. It's not hard and I would like a good reason to add it.
Photo of DivinoAG

DivinoAG

  • 36 Posts
  • 15 Reply Likes
Alright, I'll see if I can work on that tomorrow, I already got a base ready, I just need to work styling some headers and other details. I'll let you know when it's ready.
Photo of DivinoAG

DivinoAG

  • 36 Posts
  • 15 Reply Likes
It's not final (I'm still missing some details, and not really happy about some parts of it), but here is the visual of the dark theme I'm developing for Newsblur.



Here is how the homepage looks like:



What do you think?
Photo of ojiikun

ojiikun

  • 475 Posts
  • 62 Reply Likes
would love a gist of this code.
Photo of Jürgen Geuter

Jürgen Geuter

  • 9 Posts
  • 0 Reply Likes
Or a userstyles upload ;)
Photo of Hal Jordan

Hal Jordan

  • 4 Posts
  • 2 Reply Likes
I want this too.... Going through thousands of posts a day really wears on the eyes....
Photo of Autumn Corvus

Autumn Corvus

  • 3 Posts
  • 0 Reply Likes
Wow, looks great. I'd also really appreciate this.
Photo of Paul

Paul

  • 1 Post
  • 0 Reply Likes
Would really like this!
Photo of Piriya Sambandaraksa

Piriya Sambandaraksa

  • 1 Post
  • 0 Reply Likes
Yes!, thank you very much. :D
Photo of DivinoAG

DivinoAG

  • 36 Posts
  • 15 Reply Likes
Okay, here is the preliminar version. It should be mostly working, but there are some dialog boxes and other details I probably didn't touch at all. Fell free to comment here or on UserStyles.org if anything is broken or if there is something really important missing.

Remember, this is for use on dev.newsblur.com. If you try this on the normal version, it will look broken.

http://userstyles.org/styles/86275/ne...
Photo of DivinoAG

DivinoAG

  • 36 Posts
  • 15 Reply Likes
Oh, also important to point out: I'm using this on Chrome, and have yet to test it on Firefox, so let me know if there's anything wrong there if you use it.
Photo of Jonathan H

Jonathan H

  • 7 Posts
  • 0 Reply Likes
This looks fantastic, unfortunately unless I'm doing something wrong I installed Stylish and installed the theme in Firefox 20.0.1 and it doesn't work at all. Still looks like the default Newsblur, and I double checked to make sure stylish is loaded and the theme is chosen,
Photo of Jonathan H

Jonathan H

  • 7 Posts
  • 0 Reply Likes
When I edit the theme and hit the preview button it says:
231:5245 Error in parsing value for 'text-shadow'. Declaration dropped.
Photo of DivinoAG

DivinoAG

  • 36 Posts
  • 15 Reply Likes
Okay, I'll take a look on Firefox later.
Photo of chrisr

chrisr

  • 69 Posts
  • 3 Reply Likes
Looks great in Chrome 26.0.1410.65 on Mac.
Photo of Hal Jordan

Hal Jordan

  • 4 Posts
  • 2 Reply Likes
Using this now, it looks so good and works really well. Good job!
Photo of Cody Williams

Cody Williams

  • 23 Posts
  • 10 Reply Likes
Thanks man, this looks fantastic. Using it now! Looking forward to updates, thanks again.
Photo of yaomtc

yaomtc

  • 10 Posts
  • 0 Reply Likes
Newsblur has been updated since you made this, and dev.newsblur.com isn't in use. Could you possibly update this sometime so it works again? Thanks!
Photo of DivinoAG

DivinoAG

  • 36 Posts
  • 15 Reply Likes
Well, it does work, I use it everyday. What I meant is that it was meant for use with the new visual style that, at that point, was only live on dev.newsblur.com. Since the update went live, the style now works correctly on the proper site, no need to change anything.
Photo of Splike

Splike

  • 136 Posts
  • 16 Reply Likes
DivinoAG, I have used your skin ever since I started using Newsblur, and I love it! Is it possible for you to change the color/ layout of the scrolling bars to look more like G-reader's? The current ones are not so pleasant for the eyes.

Also, a member on this site helped me implement a few line of code to change the split view (when set to the left side) to be more optimal for skimming headlines:
____________________________________________________
#story_titles .NB-story-title a.story_title {
white-space: nowrap;
overflow: none;
}

span.story_date.NB-hidden-fade {
visibility: hidden!important;
position: absolute!important;
}
____________________________________________________

If you want to implement it in your final skin, be my guest, if not, could tell me where to place it in the code, for it to me most optimal? Right now, it's just thrown in the middle.

Also, the dark blue color for links, is quite hard to read with the dark back ground. Just thought you should know :)
Photo of DivinoAG

DivinoAG

  • 36 Posts
  • 15 Reply Likes
Splike, glad the skin is working for you. Let me answer your questions:

1. Scrollbars: there are two techniques to do that, one only works on IE, another only works on Webkit (Chrome and Safari, I suppose also now on Opera but never tried it). I suppose I can add the code for those, I'll let you know if it works. If you use Firefox you're out of luck tho.

2. Short headlines: I personally wouldn't use that, because it cuts out a great deal of the headlines, which to me is a dealbreaker. I added it to my code here just to give it a try, and it seems to work perfectly no matter where you add it, so what I would do in your case is to actually create a new style for the domain "newsblur.com" and split just your code to this style. This way if you need to update my skin, you can do it without losing your code or having to re-edit it in.

3. Where did you find dark blue links? All links for interface and content display as a light blue, as you can see on the screenshots I posted above. If you could post a screenshot of that I will try to fix it right away.
Photo of Splike

Splike

  • 136 Posts
  • 16 Reply Likes
1. I use chrome, so it would be nice to have that added.

2. My main monitor is a 24" widescreen, so I have plenty of room to show most long topics.Great idea to make it separate. Here is is if anyone wants to use it:
http://userstyles.org/styles/89095/ne...

3. It happened in a facebook feed, but I am unable to reproduce the dark blue links now. All my links are now normal light blue as they are supposed to be. I am not sure exactly what happened, but it's all good now. I think deleting your style and redownloading it solved the problem, so it must have been some code I have accidentally deleted or maybe it was because I placed my code snippet in the wrong place (probably that).
Photo of DivinoAG

DivinoAG

  • 36 Posts
  • 15 Reply Likes
What can also happen is that if you have a feed that has inline CSS code (Joystick.com comes to mind, with their credit box below each post), that text will change to whatever they set no matter what. So if the feed sets the color for something to a dark tone, it might get hard to read. The same is valid for the original skin, if a dark website has inline code to change text to bright colors.

The only way to correct that would be to override all CSS inside each feed item, but that would bring all kinds of other problems. It's bad practice from the feed provider, so there's little we can do about it.
Photo of Splike

Splike

  • 136 Posts
  • 16 Reply Likes
I will just cross my fingers that I don't stumble upon a site like that then. It sounds like the devil's spawn :P
Photo of Cory Chapman

Cory Chapman

  • 1 Post
  • 4 Reply Likes
I'd like a dark theme available on iOS, too! Mine eyes have seen the glory of the coming of the feeds, and they are bright!
Photo of endingpop

endingpop

  • 2 Posts
  • 0 Reply Likes
Android for me, but same request. Dark theme on the app.
Photo of Josh

Josh

  • 25 Posts
  • 0 Reply Likes
This is great, thanks for creating it!
Photo of Charles Kane

Charles Kane

  • 7 Posts
  • 0 Reply Likes
Seems not to apply to the new non dev version,
pity
any chance of a rework
Photo of DivinoAG

DivinoAG

  • 36 Posts
  • 15 Reply Likes
It does work, I'm using it. What browser are you using?
Photo of Metalhawk

Metalhawk

  • 13 Posts
  • 0 Reply Likes
Doesn't work for me either in Firefox 21. Unless there's some special steps to take when installing it...

Edit: actually, it does work a little (VERY little). The box in the lower right corner that allows you to select "oldest first, newest first, etc" is black when this style is active. That's it.
Photo of Sternenstaub

Sternenstaub

  • 108 Posts
  • 12 Reply Likes
Same for me, FF 21. Pleazzze, ur work's just looking so damn good!
Photo of Metalhawk

Metalhawk

  • 13 Posts
  • 0 Reply Likes
I agree. It looks great. I would love to use it. :)
Photo of Charles Kane

Charles Kane

  • 7 Posts
  • 0 Reply Likes
Using FF21, def doesn't work
Photo of Samuel Clay

Samuel Clay, Official Rep

  • 6514 Posts
  • 1474 Reply Likes
I think a better place for this would be a theme garden, but I haven't heard enough interest in it to build it. But I could be convinced that a Custom CSS box, so you don't need to load it as a user style, would be a useful feature.
Photo of Daniel Lo Nigro

Daniel Lo Nigro

  • 24 Posts
  • 3 Reply Likes
What about a basic selection of a few themes on Newsblur? Not a fully-featured theme garden, just a dropdown list with a few stylesheets (hard-coded list). If a developer wants to add a new theme, they just need to fork the project and add their own theme to the list and CSS file to the codebase.
Photo of Brian Urso

Brian Urso

  • 8 Posts
  • 0 Reply Likes
+1
Photo of Samuel Clay

Samuel Clay, Official Rep

  • 6514 Posts
  • 1474 Reply Likes
Actually, strike that, it'll be a nightmare to maintain. I'd better leave it to users to use the user styles theme garden. Now, I can link to it, but I don't think I want the responsibility of maintaining it. In fact, I only support one theme and that's the current theme. I'm amenable to a custom CSS box for ease, though.
Photo of DivinoAG

DivinoAG

  • 36 Posts
  • 15 Reply Likes
Samuel, would it be possible to simply query Userstyles.com for themes made for your domain (http://userstyles.org/styles/browse/n...), and when the user selects one, you get the CSS present there and loads it on the page? That would be like having a theme garden that is just hosted somewhere else.

Having just a custom CSS box would work as well, of course, but would be harder for users to maintain than just using Stylish.
Photo of Daniel Lo Nigro

Daniel Lo Nigro

  • 24 Posts
  • 3 Reply Likes
@DivinoAG, that's a great idea.The Userstyles.org listing for newsblur.com is available as an RSS feed: http://userstyles.org/styles/browse/n...
Photo of DivinoAG

DivinoAG

  • 36 Posts
  • 15 Reply Likes
Just letting everyone here know that the theme was just updated to fix compatibility with Firefox, and to add dark scrollbars for Webkit browsers.

Firefox apparently had problems because I think Stylish adds the custom CSS before loading the original one, so every single line needs to have a "!important" code, which I didn't do at first because it's really bad practice. I corrected that (against my will :P).

Scrollbars, as I mentioned, only work on Webkit browsers like Chrome, Safari and perhaps the new Opera, which I heard was switching to Webkit. There is no way whatsoever to do make that work on Firefox only with CSS, so that's out of question. IE doesn't have Stylish, and no one should be using it anyway :)
Photo of Daniel Lo Nigro

Daniel Lo Nigro

  • 24 Posts
  • 3 Reply Likes
As far as I can remember, Opera supports custom scrollbar colours in the same way as IE, via scrollbar-base-color and friends (this was actually added way back in IE 5.5). Not sure if this is still the case, but it definitely worked many years ago.
Photo of DivinoAG

DivinoAG

  • 36 Posts
  • 15 Reply Likes
I heard Opera was retiring their own render engine to start using Google's fork of Webkit instead, so I would assume Chrome's code should work there as well.
Photo of Daniel Lo Nigro

Daniel Lo Nigro

  • 24 Posts
  • 3 Reply Likes
They are switching, and alpha versions that use the new engine are out, but it's not production-ready just yet. That and there's going to be a lot of Opera users that sit on the current version rather than upgrading.
Photo of Metalhawk

Metalhawk

  • 13 Posts
  • 0 Reply Likes
Works great and looks awesome. Thank you very much!
Photo of DivinoAG

DivinoAG

  • 36 Posts
  • 15 Reply Likes
Another small update to the theme, this time to fix some messages displayed to new users that I completely forgot that existed. Thanks Samuel for helping me test the theme against new accounts.
Photo of Sternenstaub

Sternenstaub

  • 108 Posts
  • 12 Reply Likes
Thank you very much!
Photo of CG

CG

  • 1 Post
  • 0 Reply Likes
I love the theme, thank you very much.
Photo of Charles Kane

Charles Kane

  • 7 Posts
  • 0 Reply Likes
Pretty good, appreciated.
Pity about the scroll bars (in Firefox)
BTW The new Opera is complete. I've used it. Very similar to Chrome, more addons with Chrome.
Photo of Daniel Lo Nigro

Daniel Lo Nigro

  • 24 Posts
  • 3 Reply Likes
The new Opera is still only a preview (Opera Next) release, the latest stable release is 12.15 which doesn't have the new engine.
Photo of Shea Clayton

Shea Clayton

  • 23 Posts
  • 2 Reply Likes
doh! meant mobile - for power consumption. This galaxy s4 is a battery hog :)
Photo of Splike

Splike

  • 136 Posts
  • 16 Reply Likes
Hi DivinoAG,
Do you think you could update your theme? After a recent update, all feeds now have a white bar at the top.
Thanks!
Photo of Sternenstaub

Sternenstaub

  • 108 Posts
  • 12 Reply Likes
I would love to see u working on this, too. Thank you very much, I'll appreciate that highly.
Photo of Karl Craven

Karl Craven

  • 2 Posts
  • 0 Reply Likes
One more vote for a Dark theme, please. I'm on a PC all day, so I prefer my websites dark, if I have a choice. My eyes will thank you!
Photo of kylemech

kylemech

  • 1 Post
  • 0 Reply Likes
I've just decided to pull the trigger and go premium. The biggest feature that I'm lacking at the moment is the need to take longer pieces to Readability or a similar service in order to get something easier on the eyes. I'd be content with a CSS box because I'm capable of managing the CSS myself and might modify one of these dark themes for my own use in the meantime. Still, I'd much rather keep things in one place than be required to rewire everything should I change computers, etc.
Photo of Martin

Martin

  • 7 Posts
  • 3 Reply Likes
A Dark theme option in the Android/iPhone app would help reduce power consumption for tablet/smartphone users (and reduce eye-strain in low light situations)
Photo of Mark Anderson

Mark Anderson

  • 90 Posts
  • 21 Reply Likes
A dark theme for Android is currently under development.
Photo of Computron

Computron

  • 11 Posts
  • 0 Reply Likes
whoa, really? link please?
Photo of Samuel Clay

Samuel Clay, Official Rep

  • 6514 Posts
  • 1474 Reply Likes
Photo of Computron

Computron

  • 11 Posts
  • 0 Reply Likes
Huh, I just recently subbed to the commit logs and must have missed this. Cool!
Photo of Mark Anderson

Mark Anderson

  • 90 Posts
  • 21 Reply Likes
Currently a work in progress on my fork at https://github.com/manderson23/NewsBl...

It is making progress but still a good amount for work to be done.
Photo of oli.fritz

oli.fritz

  • 11 Posts
  • 0 Reply Likes
A theme garden would be veeeryyyy nice ! A dark theme would also be awesome, also for iOS.
Photo of ry

ry

  • 1 Post
  • 0 Reply Likes
I would trade a spare kidney for a dark theme on the Android client (with a "true black" option for OLED displays as a bonus!), and having a dark theme for the web client would be quite awesome as well.
Photo of jason

jason

  • 76 Posts
  • 7 Reply Likes
The beta has an option for a dark theme, so that's coming eventually
Photo of Splike

Splike

  • 136 Posts
  • 16 Reply Likes
I'm gonna revive this thread, with focus on hopefully getting an official dark theme for NewsBlur.

I am currently using DivinoAG's Dark theme(https://userstyles.org/styles/86275/newsblur-kemwer-black), but it hasn't been updated in over two years now, and some elements are not skinned, such as the feed title pane and a few buttons. Because of this, it feels broken and could use an update.

I'd like to see an official dark theme, which should be DivinoAG's theme, just kept up to date. The colors are very pleasing to the eyes and overall good looking. With the work he has already put in, it should not be hard to update it and release it to the site.
(Edited)
Photo of John Foster

John Foster

  • 2 Posts
  • 0 Reply Likes
Well, this last comment is 3 years old. Samuel - will this ever happen?

Photo of yaomtc

yaomtc

  • 10 Posts
  • 0 Reply Likes
It already did. The Android app has a dark theme built in, and on desktop (Newsblur.com) there is a user style endorsed there.... Click the gear, then Goodies.