Create colour consistency

[keunes]

As noted by @ByteHamster in #21:

Unfortunately, we are currently quite inconsistent about the color. The app needs some updates in that regard, too (different colors in different pages).

Indeed we should, and I can start with correcting the website, but I'd need a hex code. I think we can just go ahead with the shade used in the icon on Google Play. @ByteHamster if you agree, please let me know the hex you used :)

[ByteHamster]

Currently used colors:

Location	Color
Website	#3498db
App icon	#008ab8
Splash screen background	#008AB8
Accent color in light theme (progress bars, checkboxes, ...)	#33B5E5
Accent color in dark theme (progress bars, checkboxes, ...)	#0099CC
Triangle in subscription view (called antennapod_blue internally)	#147BAF

I think we should use #008AB8 (icon color) everywhere.

See https://webaim.org/resources/contrastchecker/ for a color contrast tester. The contrast for that text color is enough on a black background and nearly enough on a white background. Additionally, it can be used as background color for black text. It has nearly enough contrast to use as background color for white text (from my perception, the contrast is even better than with black font).

Possible disadvantage: The color is not a Material color. The closest Material color would be LightBlue800 (#0277BD).

What do you think?

[keunes]

Thanks for that overview!

Possible disadvantage: The color is not a Material color.

The colour scheme you're referring to is from 2014 I see. Since then, Google released the Material palette generator which "can be used to generate a palette for any color you input." What, concretely, would be the disadvantage of using a colour outside the original palette?

I think we should use #008AB8 (icon color) everywhere.

This colour contrasts ok with black, but not with white (doesn't even reach AA for normal text) - even though it looks better than black with a higher colour diff.

Taking the icon colour as starting point and making it a wee tat darker (Hue & Saturation persistant, slightly lower Value: 66 instead of 72) you would get #007EA8. The contrasts for this colour would be 'ok' with both white and black regular text (AA standard), meaning it can be used in different occasions, with white having a higher colour contrast (471, even though it should be 500 minimum) than any of the other 3 options (black on this new colour and black & white on current icon colour). Indeed Google automatically picks white as text colour for this background (in the tool linked to above) - and it would call the colour 'Primary 800'.

That would be my counter-proposal. We could go for the current icon colour (#008AB8) but then we'd have to use black text which looks less attractive and has a lower colour diff than white-on-proposal.

Curious to hear what you think :)

[keunes]

Related: AntennaPod/AntennaPod#3372

[ByteHamster]

We have to keep in mind that the backgrounds of the app are not white/black, but #fafafa and #595959. Do you think we should adapt them to?

Actually, we do not often use blue text in the app. So while the contrast should be an indicator, we can probably miss the target contrast without big consequences. I would be happy to replace the colors of the progress bars with the new one because we still use the default "Holo" color. To me, that color feels over-used and therefore not nice to look at.

[ByteHamster]

When putting the colors next to each other, my suggestion looks more vivid, I think. We shouldn't use a color that's too grey. I think the contrast numbers are actually less important than we think: we nearly never use blue text. Additionally, a more light color will have better contrast in the dark theme (light theme is closer to white than dark theme to black).

[ByteHamster]

I have a new suggestion. Removed a bit of green from your suggestion: #007DBA

I think that color looks more vivid than your suggestion. Contrasts on black and white seem to be okay and the material color tool selects a white text color.

What do you think?

[keunes]

Yeap, I like it. I tried wanted to maintain the green tint with my proposal as I thought it a bit unique to AntennaPod, but it was a bit dim indeed.
With your proposal the contrast levels with black and white are inverted (black vs white), but still fine.

We have to keep in mind that the backgrounds of the app are not white/black, but #fafafa and #595959. Do you think we should adapt them to?

These grey and white ish colours contrast horribly with the blue, and shouldn't be used for text or other elements on the new blue. However, maybe we can use the grey as primary, and the new blue as secondary colour? (link is to Google's Color Tool).

But I must say blue as primary and grey as secondary colour also looks nice, as does blue as primary, and no secondary.

Would it be feasible to let the user choose between 4 themes; blue, light, dark, and amoled?

[ByteHamster]

I think we first should just replace all blue parts in current themes with the new blue. I don't want to keep adding themes because then users will start requesting themes in every color.

I just noticed that clickable links in shownotes currently also use blue. So I think we should actually make the dark theme a bit darker

[keunes]

I think we first should just replace all blue parts in current themes with the new blue. I don't want to keep adding themes because then users will start requesting themes in every color.

I don't think people would start asking for pink themes if we introduce a theme in the app's brand colour. And if they would, it could easily be rejected as out of compliance with the brand. But anyway, you're right - main thing is to unify coding and a blue theme is a separate, nice extra.

I just noticed that clickable links in shownotes currently also use blue. So I think we should actually make the dark theme a bit darker

The shownotes in the dark theme already have a black (as in real black) background, so not sure if that can be much darker. As the contrast between proposed blue and black is ok, the blue can simply be applied I think?

Should we propose this in the other thread, you want to check your proposed tint with others? If not, I can implement the new colour on the website.

[ByteHamster]

The shownotes in the dark theme already have a black (as in real black) background, so not sure if that can be much darker.

I just noticed that the background when tapping an item is actually black. The background of the shownotes on the player screen is grey, though. I think making it black there would not look good (because of the tabbed layout).

I don't know why I thought that #595959 is the dark theme background. It's actually #303030.

[ByteHamster]

I just compiled a version that uses #007DBA everywhere. To me, the color feels too dark in both dark theme and light theme... I am starting to believe that we can not use one single accent color for dark and light theme anyway.

To try yourself (as always, installs alongside the existing installation):
https://drive.google.com/open?id=1QrcSYKzsmp7tBy-Rs2Npd4llAv24rvUr