StackOverflow-Dark icon indicating copy to clipboard operation
StackOverflow-Dark copied to clipboard

Allow font color customization

Open Aran-Fey opened this issue 5 years ago • 13 comments

I installed this style today and I soon noticed that the low contrast made my eyes hurt. The grey used for the text is just too similar to the grey used for the background. It's especially bad in chat. It's hard to judge contrast in cropped screenshots, but here are some examples:

image

image

image

image

It's especially ridiculous how bright and saturated the green/red/blue in the last screenshot are, compared to the unreadable grey used everywhere else. Why make everything hard to read low-contrast and then hit me with these color bombs?

I'd like the contrast between background and regular text to be increased, preferably with a user-customizable setting.

Aran-Fey avatar Jul 27 '19 10:07 Aran-Fey

@Aran-Fey thanks you for binging this to our attention.

I installed this style today and I soon noticed that the low contrast made my eyes hurt. The grey used for the text is just too similar to the grey used for the background.

I dont see anything like what you describe in screenshots provided, in the contrary the contrats makes the test well readable and perhaps it could be less than #aaaaaa, What I see as a issue straight up. is the blue link colors arent perhaps what they should be mainly because Im in the process of fixing them.

In a dark style black becomes white and vice-versa, so in any case please indicate in screenshots what should be lighter or darker and please provide a link to page with issue, Ill look into it for sure =)

thanks.

the-j0k3r avatar Jul 27 '19 16:07 the-j0k3r

All of the grey text should be brighter in my opinion. It's not one specific page that's a problem; this grey text is everywhere. #aaaaaa is too dark to be easily readable on this background.

In a dark style black becomes white and vice-versa

#aaaaaa is hardly white; it's grey. Much like the background.

So I checked the CSS and the text in answers is actually #bbb:

image I played around with the color and in the end I bumped up the brightness all the way to #ddd, which looks like this: image (It's a bit difficult to see on these cropped screenshots; in reality the difference is more noticeable.)

This text uses #aaa: image And I'd much prefer if it was #ccc: image

This is of course a question of personal preference, but for me the current text color is just too dark - I get a headache if I browse StackOverflow with this theme. I need more contrast between text and background.

Aran-Fey avatar Jul 27 '19 17:07 Aran-Fey

I much prefer personally when I dont burn my retinas and can read just fine, again post a link to that page and Ill see if I can find a middle ground. As for making things custom, it would take a great deal of time to re-write style in a manner that accounts for these things.

At this time Im not prepared to add custom colors given the bad state of the style which has taken considerable ammount of time to get to a half decent place. Also theres way too many shades of white to make custom. So needs way more work just to satisfy personal preference of the few.

Alternative is fork add your colors and rebase the updates.

the-j0k3r avatar Jul 27 '19 19:07 the-j0k3r

Post a link to what page? I've said multiple times now that this problem exists everywhere.

You're right that there are too many shades of white to make a custom style for every single one, but where's the problem with making 2 or maybe 3 different levels of brightness? That's not a lot of work.

  1. Add this:
@advanced dropdown font-brightness "Text brightness" {
  Regular "Regular" <<<EOT
  --font-color-dark2: #999;
  --font-color-dark1: #aaa;
  --font-color-regular: #bbb;
  --font-color-light1: #ccc;
  --font-color-light2: #ddd;
  --font-color-light3: #eee; EOT;
  Light "Light" <<<EOT
  --font-color-dark2: #bbb;
  --font-color-dark1: #c9c9c9;
  --font-color-regular: #ccc;
  --font-color-light1: #cfcfcf;
  --font-color-light2: #ddd;
  --font-color-light3: #fff; EOT;
}
  1. Add this:
  * {
    /* dont assign any colors here */
    text-shadow: none !important;
    box-shadow: none !important;
    
    /*[[font-brightness]]*/
  }
  1. Replace color: #bbb with color: var(--font-color-regular), color: #ccc with color: var(--font-color-light1), etc.

Took me 30 minutes.

Aran-Fey avatar Jul 27 '19 20:07 Aran-Fey

Please submit a PR then, I have many of other styles to maintain, I dont have sufficient time right now to deal with this properly) . But please DO NOT add font brightness in the glob area (it specifically says not to because it causes weird issues I spend hours to fix), if needed add a root area. with the values and selection swatches in usercss area. As is above its not acceptable solution its quite hackish also.

See Stylus DeepDark v2 Ive just rewrote most of the settings to allow presets and custom colors in a cleaner way. Of course thats a stylus preprocessor we cant use in this style as is butt you get the idea. See version 1.6.9 https://github.com/RaitaroH/Stylus-DeepDark/blob/2c19c08e7a4945c4ef0efdadaef30d9d441f527d/StylusDeepDark.user.css which doesnt use stylus preprocessor some of those ideas can be applied here in a easier manner. You get the idea.

Post a link to what page? I've said multiple times now that this problem exists everywhere.

I see. Well thanks for the report in any case. Will look at any further advances when I have some time unless someone get to this first. Maybe @AfroThundr3007730 has some time and willingness to help here?

I asked for links for pages with

color

These blue in links is fallout from cleaning up wrong selectors being used, I would like to fix them but without a link to page or the actual default selectors it will have to wait until I stumble on this.

the-j0k3r avatar Jul 28 '19 06:07 the-j0k3r

This image

is from https://stackoverflow.com/users/current/?tab=reputation.

I'll play around with the brightness some more before I submit a PR, but I noticed some weird font color usage in various places... on the question list for example, for some reason you're using a really dark text color...? image What's up with that? Why doesn't this use the regular text color? Why's it so dark?

So I might end up having to redo the whole theme.

Aran-Fey avatar Jul 28 '19 07:07 Aran-Fey

What's up with that? Why doesn't this use the regular text color? Why's it so dark?

Perhaps its a screen thing also in my screen its perfectly visible. No one except you has ever complained.

So I might end up having to redo the whole theme.

Thats up to you, As long as its done in a proper manner (and I agree it needs a re-write), the alternative is do your own or fork and change things to your heart's content.

is from https://stackoverflow.com/users/current/?tab=reputation.

Yea I dont have those link in my reputation page, so to fix I need actual selectors.

the-j0k3r avatar Jul 28 '19 07:07 the-j0k3r

OK found the issue link colors https://stackoverflow.com/users/1222951/aran-fey?tab=reputation will push a fix for that in a bit.

the-j0k3r avatar Jul 28 '19 08:07 the-j0k3r

@the-j0k3r I suppose we'd have to convert everything to use variables if we wanted to make the style customizable. That will take a bit of work, since this style is kind of messy right now. I'll add it to my to-do list, probably after working on the Wikipedia-Dark style.

That said, most of the font colors appear fine on my end, and I see little difference with the suggested changes. I also tested that the elements in question meet WCAG 2.0 minimum contrast criteria (aside from the reputation tab links). @Aran-Fey have you tried checking with a different monitor or computer to see if the contrast is still a problem?

AfroThundr3007730 avatar Jul 28 '19 08:07 AfroThundr3007730

I haven't tried it on a different monitor and I don't see the point of doing so. I have like a dozen different dark themes installed for various websites, and all of them have proper contrast except for this one. It's a problem with the style, not my monitor.

Aran-Fey avatar Jul 28 '19 09:07 Aran-Fey

Well Ive spend a considerable amount of time fixing text colors, and Ive increased brightness in some cases by 10x, thats white text only, not talking about blue link colors and other elements.

Of course You cant please everyone, but I also dont see the issue reported, screenshots appear perfect here.

To convert this to use custom white text colors is a great deal of work, more than 30 minutes on a hack job.

Also @aran-fey, we get it its not good for you and you disagree, We are working for free, and we do have real loves so this isnt as important to deal with, while I appreciate your replies are born out of some frustration, please try to be a little nicer too, to me its coming across as a bit too aggressive..

the-j0k3r avatar Jul 28 '19 09:07 the-j0k3r

It seems like this is getting more and more off topic... It's not relevant if the theme meets some kind of standard or if the screenshots look good (to you). This is a feature request. Because different people like different levels of contrast (proven by the fact that most dark themes have a higher contrast than this one), I'd like it to be customizable. That's what this is about.

P.S.: Sorry I came across as aggressive; I was quite frustrated because the thread went off on all kinds of tangents. Things like "It looks good" (which is entirely subjective and pointless to argue about), repeatedly being asked for a link to some unspecified page, etc.

Aran-Fey avatar Jul 28 '19 09:07 Aran-Fey

Will get to it when we can. Thanks for the report. To speed it up you can help us with a proper solution. Else hack away in a fork to suit your immediate needs. Im not going to have time to do this properly for quite some time.

the-j0k3r avatar Jul 28 '19 09:07 the-j0k3r