3477 tweak colors for contrast

[Lakoja]

Fixes: #3477

This tweaks two colors:

• for the dark theme a new slightly darker (timeline) background is used.
• for the light theme a darker shade of blue is used as highlight color (colorPrimary and colorSecondary)

Additional change:

• Use green and red more consistent: use existing colors for the diff display; move the new light variants to colors.xml like all colors

[nikclayton]

(copied out of the initial comment, and adjusted to sit side by side)

Visual comparisson (first before, then after):

[nikclayton]

This changes more than the two colours that are in the PR description. Is that intended?

[nikclayton]

I don't think the colour of the FAB has to change, based on https://webaim.org/resources/contrastchecker/.

If I put in #ffffff as the foreground colour (ie., the pencil icon) and #2B90D9 as the background colour it reports that as a pass for "Graphical Objects and User Interface Components"

[Lakoja]

I don't think the colour of the FAB has to change, based on https://webaim.org/resources/contrastchecker/.

I guess that is what this PR is also partly about: Be consistent in color usage.

So if the FAB and text highlights are presented in colorSecondary they can and should keep it that way when that is changed.

Same goes for the green: If there is one, use it. (And change it here to improve the contrast.)

[Lakoja]

This changes more than the two colours that are in the PR description. Is that intended?

Add a part for red and green to the description.

[nikclayton]

I think this is more complex than it needs to be for what it is trying to accomplish.

The original issue (#3477) is just about the link colour. This PR changes more than that, and the description is incorrect w.r.t what it currently changes.

With this PR:

Light mode

• Links are darker (#2b90d9 -> #217aba)
• "Widget blue" (FAB, tab icons, slider thumb, etc) is darker (#2b90d9 -> #217aba) (undocumented change)
• Diff green is the same (#ccffd8)
• Diff red is the same (#ffc0c0)

Dark mode

• No difference to background (#282c37), contrary to PR description
• FAB is different colour (#2b8fd7 -> #2b90d9) (undocumented change)
• Tab icons are the same colour (#2b90d9)
• Slider thumb is the same colour (#2b90d9)
• Diff green is the same (#00731b)
• Diff "red" is now purple (#df0000 -> #df1553)

The suggested new link colours from #3477 (comment) are:

• #217aba -- link colour in light mode
• #3c9add -- link colour in dark mode

That can be achieved by:

1. Edit values/theme_colors, add an entry <color name="colorAccent">#217aba</color>
2. Edit values-night/theme_colors, add an entry <color name="colorAccent">#3c9add</color>
3. Edit values/styles.xml, add an entry <item name="colorAccent">@color/colorAccent</item> in the TuskyBaseTheme style

• In both modes that will adjust the link colour as intended.
• In dark mode the colours of the FAB, tab icons, and widgets (e.g., the slider thumb on the font size preference) are unchanged, also as intended
• In light mode the colours of the tab icons and widgets are unaffected. The colour of the FAB goes fractionally darker, #2b90d9 -> #2b8fd8

[Lakoja]

I think this is more complex than it needs to be for what it is trying to accomplish.

I guess it's not quite as complicated as listed:

• It should unify color handling a bit - there is for example no need for very special reds and greens.
• It improves contrast between color secondary and background where needed - and that leads to some consequences (e. g. fab color).

That is sensible and not too big a change for a PR.

[nikclayton]

OK, please split this in two:

1 PR -- just the accessibility changes for changing the link colours. Those are non contentious, solve a problem that users have identified and filled an issue for, and are straightforward to approve. I think the colorAccent changes I describe above are the smallest, simplest, way to do this, but if you have an approach that is even simpler then I'm happy to look at that too. Please do not change the background colour, that's a much broader change than something that just affects the link colours.

Discussion -- if you want to propose additional colour changes, or how the colours / styles / themes are currently organised (and I do see options for how they can be reorganised / updated) please do that in either a new issue or a discussion in the Matrix channels.

Thanks.

[connyduck]

The tusky_blue is still used in some places with the light theme, e.g. The "Lock account" checkbox when editing a profile, in the elephant friend drawables, and in the spinners of SwipeToRefreshLayouts.

[Lakoja]

The tusky_blue is still used in some places with the light theme, e.g. The "Lock account" checkbox when editing a profile, in the elephant friend drawables, and in the spinners of SwipeToRefreshLayouts.

As far as I remember from a year ago I (only) wanted to fix the problem at hand: low contrast for text and or links.

But I guess we could do the mentioned problems in some subsequent merges.
I would feel confident to unify the SwipeToRefreshLayouts to a base layout with the proper respective color - but not in this PR.

For the others I might need to research a bit more.

I wonder however if I should include the red character warning number here - as it is really eye-watering with the dark theme...

[connyduck]

Ok I'm gonna merge this for now. Please send more PRs, and yes that red text is very important.