I find it difficult to see the button bar buttons on the below discourse. Maybe the colour of the icon could be defined in a different way?
AI-generated summary
A discussion is underway about the poor visibility of bottom bar buttons in certain color schemes on an iOS app. gingerbeardman first raised the issue, sharing an example of a difficult-to-view button bar from selectbutton.net and suggesting a different color definition for the icon. They also noted that left/right icons seem less visible than link/down icons due to different colors, which denote enabled/disabled states.
pmusaraj proposed a solution involving a subtle CSS change, either by modifying the header primary color variable to a lighter green or increasing the opacity of the bottom bar background. pmusaraj shared an image demonstrating the latter approach, but noted that contrast would still be insufficient.
gingerbeardman considered exploring alternative themes and suggested using a CSS filter to change the color rather than applying alpha tints.
3 Likes
@pmusaraj any ideas?
2 Likes
Also, the left/right icons seem to be a different colour - even less visible - than the link/down icons?
edit: ah, the different colours denote enabled/disabled
Still a problem for me
Thanks for the reminder @gingerbeardman, I signed up for the site so I could test this out. This isn’t the site’s default theme, in fact this site has several colorful themes, it took me a few minutes to find this specific theme.
Anyhow, is there any chance you could propose to the site admins a subtle CSS change for this theme?
They can modify the header primary color variable, and change it to a lighter green. This would affect the header too, but that would be useful, the buttons in the header could use a bit more contrast.
Or, if they must keep that button color in the header, they could increase the opacity of the bottom bar background (to match the header) using:
// overrides opacity of background, originally in footer-nav.scss
@supports (-webkit-backdrop-filter: blur(10px)) {
body:not(.footer-nav-ipad) .footer-nav {
background-color: $header_background;
}
}
That would give you this (contrast would still be not enough IMO):
2 Likes
Oh! I didn’t realise there were so many other themes. I’ll try a different one. Thanks.
Maybe a solution would be to use the colour but apply some CSS filter to change it rather than doing alpha tints?