Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow font color customization #175

Open
Aran-Fey opened this issue Jul 27, 2019 · 13 comments
Open

Allow font color customization #175

Aran-Fey opened this issue Jul 27, 2019 · 13 comments
Labels
enhancement ⭐ New feature or request help wanted 🙏 Extra attention is needed

Comments

@Aran-Fey
Copy link

Aran-Fey commented Jul 27, 2019

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.

@the-j0k3r
Copy link
Member

the-j0k3r commented Jul 27, 2019

@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.

@Aran-Fey
Copy link
Author

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.

@the-j0k3r
Copy link
Member

the-j0k3r commented Jul 27, 2019

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.

@Aran-Fey
Copy link
Author

Aran-Fey commented Jul 27, 2019

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.

@the-j0k3r the-j0k3r added enhancement ⭐ New feature or request help wanted 🙏 Extra attention is needed labels Jul 28, 2019
@the-j0k3r
Copy link
Member

the-j0k3r commented Jul 28, 2019

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.

@Aran-Fey
Copy link
Author

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.

@the-j0k3r
Copy link
Member

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
Copy link
Member

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

@AfroThundr3007730
Copy link
Member

@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?

@Aran-Fey
Copy link
Author

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.

@the-j0k3r
Copy link
Member

the-j0k3r commented Jul 28, 2019

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..

@Aran-Fey
Copy link
Author

Aran-Fey commented Jul 28, 2019

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.

@the-j0k3r
Copy link
Member

the-j0k3r commented Jul 28, 2019

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 the-j0k3r changed the title Allow font color customization Allow font/background color customization Jan 24, 2020
@the-j0k3r the-j0k3r changed the title Allow font/background color customization Allow font color customization Jan 24, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement ⭐ New feature or request help wanted 🙏 Extra attention is needed
Projects
None yet
Development

No branches or pull requests

3 participants