Simple user styles for popular websites

My eyesight is pretty good and I still think you need greater contrast on your blog and perhaps a bigger font.

Personally I prefer dark backgrounds and light text and will switch eBook readers, etc, to that setting if they have one. But, not everyone is the same. I'd be interested to see what the most popular preference is.

Light text on a dark background is fuzzy for me and hurts my eyes due to constantly trying to focus. This guy has an interesting theory about black text absorbing surrounding light while light text reflects it causing blurriness: http://uxmovement.com/content/when-to-use-white-text-on-a-da...

I use f.lux to mitigate the brightness of light backgrounds system wide because it adjusts according to time of day.

A problem I found with dark-background sites is that majority of the website use light background with dark text. As a viewer, switching from a dark-background website to a light-background-text can be a little painful, especially after spending a long period of time on the darker page.

Typography 101 says that light on dark requires a bigger font weight. It could be that people forget this in the cases where it bothers people.

It's almost an easter egg, but Daring Fireball also supports custom font sizes at the bottom of the site: http://daringfireball.net/preferences/.

if the blog has good content I usually just copypaste the content in the notepad to read it.

The problem with dark background sites is that almost every content oriented site that's popular use light backgrounds.

If you spend most of your time looking at a light background then switching to a dark background takes a little bit to adjust to.

It's more of an issue after you read a long article on a dark background, when you switch to a light background then things look weird for a noticeable amount of time.

Overall, the typography on your blog is pretty good. I'd definitely increase the contrast of the text though. Your measure is a little on the long side. A good guideline is to keep it under 80 characters. You're stretching it a bit at 90-ish characters, but you've got plenty of leading, so you can get away with it. If you reduced your measure a bit, you could reduce your leading a bit so your paragraphs would have a more natural density and better vertical rhythm.

http://en.wikipedia.org/wiki/Measure_(typography)

http://en.wikipedia.org/wiki/Leading

Note: You'll notice that CSS line height is not the same as leading, but old habits die hard, and I'm used to referring to it as leading.

http://blog.8thlight.com/chris-peak/2012/12/30/vertical-rhyt...

I spend the whole day staring at light on dark text, but generally I find it difficult to read websites that have that setup. It's partly for the reason others have mentioned - changing from one to the other requires some time for my eyes to adjust - but it's aggravated by many sites because there is so much contrast between the text and the background.

I use a variant of Tomorrow Night, and the pastels on moody darks works well, but as things approach white on black, it leaves me needing a lie down

My sight isn't starting to go, but I will say I find the blog much more readable before the custom font got loaded and it still used Verdana (I'm on Windows).

Depends on the typical and current conditions of the viewer--however few people realize it. Those that do use f.lux or one of the others.

For example, if the viewer sits in an office under 50 florescent lights, dark on light is best (e.g. Excel-jockies). This viewer "can't imagine any other way!" I often wonder how these people survived before Windows.

If instead they are a digital artist in dim lighting (for better color accuracy) then bright white pages will be blinding, "my eyes are bleeding". Ditto the late-night hacker.

Since I'm online day and night I make judicious use of the negative plugin in compiz (Super+N) and turn down screen brightness at night. When on Windows I use f.lux.

For the browser specifically, the invert-lightness bookmarklet is also helpful when a lot of images are involved: https://www.squarefree.com/bookmarklets/color.html

Light on dark can be really hard to read for anyone with a pronounced astigmatism.

The background color bleeds into text dramatically lowering the contrast. On computer displays, black on pure white can cause the same issue to a lesser effect. I find black on a pale color is optimal.

A bit more extravagant, but this is what I use for a dark take on HN

https://gist.github.com/brcooley/5045265

Techcrunch:

  * { visibility: hidden !important; }

I actually rarely go to the news.ycombinator.com site. I always just use hckrnews.com.

Stylebot perhaps?

https://chrome.google.com/webstore/detail/stylebot/oiaejidbm...

You could try dotcss: https://github.com/stewart/dotcss

I just tried Stylish add-on for Firefox. Works great except I can't seem to figure out a way to make custom styles work for only a specific page. Maybe I'm missing something but there doesn't seem to be a way.

For example if you have .margin-width CSS class defined it will work on any page that has .margin-width CSS class, not just desired page (like Facebook).

On Ubuntu & Co, you can copy it in your global custom stylesheet:

Chromium: ~/.config/chromium/Default/User\ StyleSheets/Custom.css

Chrome: ~/.config/google-chrome/Default/User\ StyleSheets/Custom.css Other browsers: Don’t know

You can see the Stylish icon in the poster's screenshots.

https://chrome.google.com/webstore/detail/stylish/fjnbnpbmke...

This question _should_ be answered on the given site.

I know I could Google to find out, but what about the general Facebook user? They won't know what CSS is.

Is there a way to get any of these working on an Android web browser?

I'm using Stylebot.

Probably to head off inevitable complaints by people assuming that this is a criticism of those sites' designs.

The 'complete redesign' trend has been seen by some in the design community as a bit arrogant and impractical. My guess is that poster didn't want to be included in that crowd.

Probably doesn't want to burn any bridges or piss anybody off. If he's friends with Mark Otto (creator of Bootstrap) I assume he's not some unknown CS student looking to make a name for himself but actually somebody who works in the industry and cares about his reputation.

I thought it was a good idea to include the disclaimer. As obvious as it might seem that these are opinionated modifications to the site's intended style, it may save some grief to make your awareness of the issue clear.

Perhaps as a "I'm not committing contributory copyright infringement" statement.

Altering a page for a user to remove ads, for example, is pretty much providing a [unlicensed] derivative work. Providing the tools to perform copyright infringement - with the encouragement of a demonstrated technique - could be considered to be contributing to a tortuous infringement, jurisdiction dependent [along with a pile of other dependencies] of course.

'User styles' is a common name for user-applied CSS stylesheets; it's not necessarily about applying styles in the English sense of the word. According to the author, these stylesheets remove some of the clutter, which presumably includes some or all ads.

Annoyances are not always ads. Looking at twitter it's also removing annoying "features" like trending, who to follow, and the extra navigation box from the left column.

That doesn't appear to be the focus. Facebook and Twitter timeline ads will remain, obviously (does anyone actually click on the floating ads on the right of the FB UI), Daring Fireball retains it's very subtle image ad (but, who are we kidding, it's one big Apple ad anyway, amiright?).

It would be ethical to include the ads though.

If this wasn't about removing ads, they would have been reformatted to be beautiful too.

Removing ads is effectively the same as pirating software: You're getting what you want without paying for it.

If you like that.... There's a chrome extension that makes .com look more like their other properties: https://chrome.google.com/webstore/detail/neue-face/pjjeeinb...

You need to add an "!important" attribute at least for the "display:none;" properties for them to work. Too lazy to make a pull request, sorry ;)